是否可以在 HTML 中现有框架下方的 html 中打开新框架？答案

【问题标题】：Is it possible to open a new frame in html below an existing frame in HTML?是否可以在 HTML 中现有框架下方的 html 中打开新框架？
【发布时间】：2010-04-07 11:38:27
【问题描述】：

我有一个给定的 html main.html ----- 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>

这里第一帧包含一个由 Flex Builder 3 生成的 html，然后在按钮上单击那个 flex 项目，我正在使用外部接口在 main.js 中调用函数 func2()。

---- main.js-----------------

var flag2=0; 函数 func2() { 标志2=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"; }

我希望另一个文件在第一个窗口下面的同一个窗口中打开。但是这里的问题是当我在 IE8 中运行它时，另一个框架在另一个窗口中打开，但在 Firefox 中我没有得到任何响应。

注意：- 两个浏览器都启用了 Javascript，并且弹出窗口没有被阻止

请告诉我我哪里错了

提前致谢

Prashant Dubey

【问题讨论】：

您的框架集应该在正文中而不是在头部标签内。同样在 Firefox 中，如果您打开 ErrorConsole（在工具菜单上），它是否会给您一条错误消息？
其实我上面的评论是错误的。看起来 body 元素需要在其中一个框架w3schools.com/tags/tag_frameset.asp 的源中定义。我认为您最好使用 iframe。
我已经尝试将其保留在正文中，但在 IE 和 Firefox 中甚至连第一帧都看不到。 Firefox 中的 ErrorConsole 没有错误。谢谢

标签： javascript html apache-flex

【解决方案1】：

您的框架集错误。框架集不是页面，因此它没有正文：

<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>

【讨论】：

【解决方案2】：

好的，找到了解决办法。需要将 NAME 标签添加到 Frames 以及 ID 标签。正如其他人已经回答的那样，还需要格式正确的框架集标签，但没有 NAME 标签它仍然无法工作。

编辑（再次）：另外，注意到您关于多个文件和单个脚本的其他任务。我刚刚为下面的示例转储了内联脚本，但您也可以将其设为 .js 文件。而是将其加载到所有 html 文件中，您可以在加载到框架中的辅助文件中使用 parent.function() 样式的 js 调用。同样，取决于那里有多少代码以及您要做什么等。里程可能会有所不同。 =)（你会注意到我不需要在我的 1.html 文件中添加脚本。）

见下文...

主要的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>

那么，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 和 3.html 可以是任何东西，没关系。

此设置的问题在于 IE 在 javascript 中查找 ID 标记，而 FireFox 正在查找框架的 NAME 属性。以上页面可在 IE、FF 和 Chrome 中使用。

【讨论】：

【解决方案3】：

这是一个可能有帮助的 iframe 示例

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>

三个.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>

【讨论】：

感谢您的回复，我会尝试以同样的方式通知您。感谢大家发布答案
我得到了它的工作，但 parent.func() 给出了错误，所以我使用了 window.parent.func() 并且它工作了.. 感谢大家的帮助。非常感谢

【解决方案4】：

框架用于分割网页，就像设计工具中的切片一样。它们不能相互重叠。

也许您可以通过使用iframes 而不是使用框架集来实现您想要的。请参阅this site 进行演示。但话又说回来，如果有不支持重叠 iframe 的浏览器，我不会感到惊讶。

【讨论】：