I am experiencing a problem whith showModalDialog on IE11. The dialog window works fine, but ignores the width and height parameters. The dialog opens in a very small window and the user needs to resize it.
I know that this function is deprecated in Chrome and I know other options like jQuery-UI dialog, but I want to know if it is possible to fix this problem for IE11 using showModalDialog.
js code:
var url = "/xxWar/xxModal.jsp?title=xx&frameUrl=/xxWar/xxServlet%3Faction%3Dxx";
var value = showModalDialog(url, init, "dialogWidth:" + width + "px;dialogHeight:" + height + "px;resizable:yes;status:no;scroll:yes;help:no");
and the xxModal.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=request.getParameter("title")%></title>
</head>
<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
<frame src="" name="header">
<frame src="<%=request.getParameter("frameUrl")%>" name="main" id="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Thank you!
I fixed the problem adding this line <meta http-equiv="X-UA-Compatible" content="IE=7"> inside de modal.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=request.getParameter("title")%></title>
</head>
<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
<frame src="" name="header">
<frame src="<%=request.getParameter("frameUrl")%>" name="main" id="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
<meta http-equiv="X-UA-Compatible" content="IE=7">
You don't need to go back as far as IE7, setting content="IE=9" works too - that's what we use & we set height & width according to our needs ;)
Related
I have a frameset with two child frames.
<frameset rows="241px,*" id="header_fr">
<frame src="frame1.htm"/>
<frame src="frame2.htm"/>
</frameset>
I use frame1.htm just as a header and I change its size dynamically every time content is changed in frame2.htm.
I change the size of frame1.htm using parent.document.getElementsByTagName("frameset")[0].rows = new_size + ",*";
Everything is working fine, but sometimes parent.document.getElementsByTagName("frameset")[0] is no longer available, it's null or not an object. What can be the reason for this problem?
How do you use the JavaScript function? It might be the DOM hasn't loaded completely that caused the issue. You should ensure that the function is executed after the object being fully loaded.
I use the code like below to test and it works well in IE 8, you could check it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="241px,*" id="header_fr">
<frame src="frame1.htm" />
<frame src="frame2.htm" />
</frameset>
</html>
frame1.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="background-color:aquamarine">
111
</body>
</html>
frame2.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="background-color:burlywood">
222
<script>
parent.document.getElementsByTagName("frameset")[0].rows = 40 + ",*";
</script>
</body>
</html>
I'm using Selenium with Python to fill in a form on a site where the frames are visible in the html but I still haven't been able to get Selenium to detect any frames or form elements.
I think it is because there is Javascript in the since I see the same scripts referenced throughout the html of the form fields.
I'm very new to this so I'm not quite sure where to get started. From what I've read I might need to use Python's "execute_script" and/or Selenium's javascriptexecutor.
Here is a snippet of the HTML from top to the frame with the fields I'm after (the frame name "main" is the one with the form in it):
<html><head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>eBridge Inc.</title>
<script type="text/javascript">
function startup() {
parent.header.location.href = 'header.aspx?guid=' + window.name;
parent.nav.location.href = 'nav.aspx?guid=' + window.name;
parent.main.location.href = 'welcome.aspx?guid=' + window.name;
parent.footer.location.href = 'footer.aspx?guid=' + window.name;
}
</script>
</head>
<frameset rows="75px,25px,*,30px" frameborder="0" border="0" framespacing="0" onload="startup();">
<frame name="header" scrolling="no" noresize="noresize" frameborder="0" marginheight="0">
<frame name="nav" scrolling="no" noresize="noresize" frameborder="0" marginheight="0">
<frame name="main" noresize="noresize" frameborder="0">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<html>
<head>
<title>Retrieve</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link id="mainStylesheet" href="../StyleSheet.css?62" rel="stylesheet" type="text/css">
<link id="dhtmlxStylesheet" href="../Scripts/combobox/style/dhtmlxcombo_touch.css?62" rel="stylesheet" type="text/css">
<link id="datepickerStylesheet" href="../Scripts/datepicker/jquery.ui.datepicker.css?62" rel="stylesheet">
<link id="jqueryuiStylesheet" href="../Scripts/jquery-ui-1.10.3.custom.css?62" rel="stylesheet">
<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/datepicker/jquery.ui.datepicker.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
<script src="../Scripts/json.js" type="text/javascript"></script>
<script src="../Scripts/combobox/scripts/dhtmlxcommon.js?version=3" type="text/javascript"></script>
<script src="../Scripts/combobox/scripts/dhtmlxcombo_touch.js?version=3" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
try
{
parent.nav.document.location = '../nav.aspx?menu=&guid=' + parent.window.name;
}
catch(ex){}
//focus on first tb/ddl
$('#tblIndex').find('input[type=text]').filter(':visible:first').focus();
$("#start_date").datepicker({
changeMonth: true,
changeYear: true
});
$("#end_date").datepicker({
changeMonth: true,
changeYear: true
});
$("#start_date").mask("99/99/9999");
$("#end_date").mask("99/99/9999");
$("#start_calendar_icon").click(function (event) {
$("#start_date").focus();
});
$("#end_calendar_icon").click(function (event) {
$("#end_date").focus();
});
// for enter keystroke
$(document).keyup(function (e) {
CheckKeyCode(e);
e.preventDefault();
});
$('.dhx_combo_input').keyup(function (e) {
CheckKeyCode(e);
e.preventDefault();
});
When I use the following python in Selenium, it throws the "no such frame" exception:
driver.switch_to.frame("header")
It does this for the rest of the frames as well.
So I tried listing all elements on the page using this:
for ii in ids:
print(ii.get_attribute('id'))
And it only returns a few of the page elements (none of which are form fields), namely these:
stylesheet
hf
imgLogo
welcome
h_log_out
retrieve
aView
help
aSupport
cabnm
My goal is to input text into the form fields within the frame "main". I normally don't have any issue with using Python to interact with pages, but I'm not sure how to deal with the scripts on this page that seem to be preventing me from detecting and switching frames.
Any advice on whether the scripts are the culprit and if so, how to make them display the rest of the frames and elements is appreciated. I prefer solutions in Python but am open to anything.
'#TodorMinakov: Thanks Todor, I was able to fill out and submit the form ONLY after adding the following lines before anything else:
driver.switch_to_default_content()
driver.switch_to.frame("main")
I'd love to know why this is necessary, but at least it works now.
Thanks again Todor for your answer in the comments.
Hello I want to autofill data in iframe on cross domain.I have a code but it's not working. please help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function autoFill() {
var f=fm.document.forms[0];
f.form-control.value='Zanne';
f.submit();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="autoFill();">autoFill</button>
</div>
<iframe name="fm" id="fm" src="url.com" width="100%" height="100%"></iframe>
</body>
</html>
the input filled:
Have any way to do this.
This is going to be a CORS violation.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
There are some workarounds to this. You have to use the postMessage API. Your parent window would need to send JavaScript events to the iFrame, which would need to have an event listener and react to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I have PHP page in subfolder, /subfolder.
In root I have two files: index.html and demo.html.
demo.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<div id="demo_wrapper">
<div id="themeslist">
<form action="" name="form" id="form">
<select name="select" onChange="MM_jumpMenu('parent',this,1)">
<option value="#">Select Theme</option>
<option value="http://127.0.0.1/themes/index.php?theme=1">Theme1</option>
<option value="http://127.0.0.1/themes/index.php?theme=3">Theme2</option>
</select>
</form>
</div>
</div>
</body>
</html>
and index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<frameset rows="100,*" framespacing="0" frameborder="no" border="0">
<frame src="http://127.0.0.1/demo.html" name="head_frame" scrolling="no" noresize="noresize" id="head_frame" title="head_frame" />
<frame src="http://127.0.0.1/themes/index.php" name="main_iframe" id="main_iframe" title="main_iframe" />
</frameset>
<noframes>
<p>Your browser does not handle frames!</p>
</noframes>
</html>
Source: http://www.entheosweb.com/website_design/jump_menus.asp
Now problem is when i select option in menu - it reloads whole page and frames dissapear.
What change to reload only selected frame (main_iframe)?
First of all you don't use iframe, you use the old fasion frameset. However,
In your form that handles the select menu, you have to set target attribute to be the name of the frame you wants the location open in it, as follows:
<form action="" name="form" id="form" target="main_iframe">
You have to choose the target to be suitable with the window name that you want to open it. i.e main_iframe or anything else.
So I found solution:
It was way too easy... just changed onchange action in select menu to:
onchange="window.open(this.options[this.selectedIndex].value, 'nameOfTargetFrame')"
and removed whole *MM_jumpMenu* code. Thanks for tips, I wouldn't found it without them :)
I have a html main.html as given
----- main.html----------------
<title>FlexTrail</title>
<script src="main.js"></script>
<frameset rows='200,200'>
<frame id='one' src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder='0' />
<frame id='two' src="" frameborder='0' />
</frameset>
</head>
<body >
</body>
here the first frame contains a html generated by Flex Builder 3 and on button click on that flex project i am calling function func2() in main.js using External Interface.
---- main.js-----------------
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html";
parent.frames['two'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project2/bin-debug/project2.html";
}
I want the other file to open in same window bellow the first one.But the problem here is when i run this in IE8 the other frame opens in a different window but in Firefox im not getting any respose.
Note:- Javascript is enabled in both browsers and popup are not blocked
Plz tell me where i m wrong
Thanks in advance
Prashant Dubey
Your frameset is wrong. A frameset is not a page, so it doesn't have a body:
<html>
<head>
<title>FlexTrail</title>
<script src="main.js"></script>
</head>
<frameset rows='200,200'>
<frame id="one" src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder="0" />
<frame id="two" src="" frameborder="0" />
</frameset>
</html>
Ok, found fix. Need to add NAME tag to Frames as well as ID tags. Also need properly formatted frameset tags as others have answered, but without NAME tag it still won't work.
Edit (again): Also, noticed your other quest about multiple files and single script. I just dumped the script inline for my example below, but you could make it a .js file as well. Rather load it to all html files, you could just use parent.function() style js calls in the secondary files that get loaded into frames. Again, depends on how much code is there and what you are trying to do etc. Mileage may vary. =) (You'll notice I didn't need to add script in my 1.html file.)
See below...
Main html:
<HTML>
<HEAD>
<TITLE> Title Goes here </TITLE>
<script type="text/javascript">
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="1.html";
parent.frames['two'].location="3.html";
}
</script></HEAD>
<FRAMESET rows="115,*">
<FRAME SRC="1.html" ID="one" name="one">
<FRAME SRC="2.html" ID="two" name="two">
</FRAMESET>
</HTML>
Then, 1.html:
<HTML>
<HEAD>
<TITLE> Cow goes Moo </TITLE>
</HEAD>
<body>
One.html
<input onclick="parent.func2();" id="Button1" type="button" value="button" />
</body>
</HTML>
2.html and 3.html can be anything really, doesn't matter.
The problem with this setup is that IE looks for the ID tag in the javascript, but FireFox is looking for NAME attribute of the frame. Above pages work in IE, FF and Chrome.
Here is an example with iframes that may help
Main.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function loadTwo()
{
document.getElementById('two').src = 'two.htm'
document.getElementById('two').style.display='block';
}
function loadThree()
{
document.getElementById('two').src = 'three.htm'
document.getElementById('two').style.display='block';
}
</script>
<title>Untitled Page</title>
</head>
<body>
<iframe id="one" src="One.htm"></iframe>
<iframe id="two" style="display: none" src="Two.htm"></iframe>
</body>
</html>
One.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function load2_onclick() {
parent.loadTwo()
}
function load3_onclick() {
parent.loadThree()
}
// ]]>
</script>
</head>
<body bgcolor="#ff0000">
<input id="load2" type="button" value="Load 2" onclick="return load2_onclick()" />
<input id="load3" type="button" value="Load 3" onclick="return load3_onclick()" />
</body>
</html>
Two.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body bgcolor="#00ff00">
</body>
</html>
Three.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body style="background-color: #0000ff">
</body>
</html>
Frames were used to segmentate webpages, just like slices in design tools. They cannot overlap each other.
Maybe you could achieve what you want by using iframes instead of using a frameset. See this site for a demonstration.
But then again, I wouldn't be surprised if there are browsers that do not support overlapping iframes.