Question

我正在尝试从iframe1调用iframe2函数

  document.getElementById('cDiv').contentWindow.toggle_main();
   var iframe = document.getElementsByTagName('iframe')[1];
  iframe.contentWindow.myFunction();

控制台返回Uncaught TypeError：无法读取未定义的属性'contentWindow'

我也尝试过：

   window.frames['iframe2'].toggle_main();

iframe2中的函数被调用：

 <script>

 window.myFunction = function(args) {
  alert("called");    
 }
 </script>

iframe定义为：

<DIV id="cgDiv">
<IFRAME  id="contentGenerator" SCROLLING="No"  name ="iframe1" src="outlook.html">
</IFRAME>
</DIV>
<DIV id="cDiv">
<IFRAME id="content" SCROLLING="AUTO" verticalscrolling="yes"  NAME = "iframe2" src="index.html">
</IFRAME>
</DIV>

关于问题应该在哪里的想法？

Answer 1

// First iframe called (ifr_url) in Master page.
// Second iframe called (ifr_tab5) inside the master page.
// I want to call function (Hallow()) in second iframe.

var win = document.getElementById("ifr_url"); // reference to iframe's window
var doc = win.contentDocument? win.contentDocument : win.contentWindow.document;
var form = doc.getElementById('ifr_tab5').contentWindow.Hallow();

Answer 2

Javascript无法直接访问IFrame中的函数。 IFrame可以访问其父级中的函数。

因此，如果您的主页面公开了一个方法RegisterCallback，那么IFrame可以使用其中一个函数作为参数来调用它。然后页面可以存储对该函数的引用，并在另一个时间调用它（使用任何参数...）

更新：添加了示例代码

以下代码是两个文件; index.html 是iframe（s）的主页面， child.html 是iframe中的页面。

我committed the example to github你可以test it by following this link。由于浏览器安全限制，代码必须从同一个Web服务器加载，如果直接从文件系统运行，则无法运行。

我故意将儿童iframe包括两次，以说明可以使用此技术注册任意数量的儿童。我把它作为练习留给读者添加第三个iframe ...... :)

的index.html

<html>
<body style="background:#efe">

    <h1>This is the master page</h1>
    <p><button id="setChildButton" type="button">Make child blue</button></p>
    <iframe src="child.html"></iframe>
    <iframe src="child.html"></iframe>
</body>
</html>
<script>
    var childCallbacks = [];

    function registerChild(callback){
        console.log('Registering child callback');
        childCallbacks.push(callback);
    }

    function onButtonClick(){
        for (var i=0; i < childCallbacks.length; i++){
            var callback = childCallbacks[i];
            callback('blue');
        }
    }

    window.onload = function(){
        document
            .getElementById('setChildButton')
            .addEventListener('click', onButtonClick);
    };
</script>

javascript有一个函数registerChild()，它从不调用自身，但可以从子页面调用来注册它们的端点。

单击该按钮时，将使用字符串“blue”调用所有已注册的回调。然后由childs端点做一些好事。在这种情况下，改变自己的背景颜色。

child.html

<html>
<body id="childBody" style="background:#fee">
    <h2>This is the child page</h2>
</body>
</html>
<script>

    function setBackground(color){
        var body = document.getElementById('childBody');
        body.style.backgroundColor = color;
    }

    window.onload = function(){
        if (parent && parent.registerChild){
            console.log('registering with parent');
            parent.registerChild(setBackground);
        }
    };
</script>

子进程的javascript检查是否有父进程（它在iframe中运行）并且父进程提供了一个名为registerChild()的函数。然后它调用该函数并引用其自己的函数setBackground()。

当父级稍后使用字符串“blue”调用回调时，它会转向并将其自身的bodys背景颜色设置为该值。

Answer 3

如果您的所有文档共享相同的来源，它应该有效，所以调用

window.parent.frames['other frame name'].contentWindow['func']()

某个框架内的

将从neigbour iframe调用func。

在Firefox中看到hacky简单的数据库示例（Chrome认为dataURI文档始终是不同的来源，因此它会引发安全性异常）

data:text/html;charset=utf-8,<iframe id="a" src="data:text/html,<h1 id=a>0</h1><script>function inc(){a.innerHTML++}</script>"></iframe><iframe id="b" src="data:text/html,<button onclick=window.parent.frames.a.contentWindow['inc']()>inc in prevous frame</button>"></iframe>

如何调用另一个iframe的功能

3 个答案:

的index.html

child.html