Is it possible to open a new frame in html below an existing frame in HTML?
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 Interfac开发者_StackOverflow社区e.
---- 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.
加载中,请稍侯......
精彩评论