logo标签列表

如何调用子<frame>中指定的JavaScript函数

javascripthtmlframeframeset
16

我在处理一个古老的项目，它基于 <frame> 和 <frameset> 标签。

这是父页面（index.html）常见的HTML结构：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>  
</head>
<frameset rows="75px,*" frameborder="0">
    <frame name="frame1" src="frames/frame1.html">
    <frameset class="child_frameset">
        <frame name="frame3" src="frames/frame3.html">
    </frameset>
</frameset>
</html>

以下是我如何在子框架（frame3.html）上指定 JavaScript 函数：

<!DOCTYPE html>  
<html lang="en">  
<head>
    <script type="text/javascript">
        function helloWorld(){
            alert('hello world!');
        }
    </script>   
</head>
<body>
    <h1>I'm frame 3</h1>
</body>
</html>

我的任务是调用helloWorld()函数。我该怎么做？
提前感谢！

你是在尝试从父级调用该函数吗？ - Ibu
是的！我正在尝试从父页面（index.html）调用 helloWorld() 函数。 - LoomyBear
3个回答
26
你可以这样做： 

document.getElementById('frame3').contentWindow.helloWorld();
虽然先给框架分配ID可能是个好主意，但+1。 - lonesomeday
3
示例中的框架没有ID，因此getElementById不太适用。只需要使用名称，可以使用window.frames["frame3"].helloWorld()。 - RoToRa
谢谢您的快速回复...我尝试了所有这些，但是firebug控制台返回window.frames.frame3未定义和document.getElementById("frame3")为空（请注意，我给frame一个id="frame3"）...有什么想法吗？ - LoomyBear
太棒了！只需一個簡單的調整...我必須指定 DOM 加載事件，然後觸發函數 $(window).load(function(){ document.getElementById("frame3").contentWindow.helloWorld(); }); ... 完美地運行了！ - LoomyBear
2
您可以从子框架调用方法。
window.frames[n].frames[m].methodName()

其中n，m是从0开始的整数。如果您只有一个框架文档，请删除frames[m]部分并完成工作。

还有一件事，尝试并找出确切的帧编号和方法。

希望这可以帮助您。

1
检查 contentWindow、contentDocument 并获取框架对象，执行调用。
var siblingFrame;
if (parent.document.getElementById('siblingFrameId').contentWindow){
  siblingFrame = parent.document.getElementById('siblingFrameId').contentWindow;
} else if (parent.document.getElementById('siblingFrameId').contentDocument){
  siblingFrame = parent.document.getElementById('siblingFrameId').contentDocument;
} else if (parent.document.getElementById('siblingFrameId')) {
  siblingFrame = parent.document.getElementById('siblingFrameId');
}

siblingFrame.helloWorld();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接