【问题标题】:How to call function of another iframe如何调用另一个 iframe 的函数
【发布时间】:2019-09-08 01:05:23
【问题描述】:

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

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

控制台返回 Uncaught TypeError: Cannot read property 'contentWindow' of undefined

我也试过了:

   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>

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

【问题讨论】:

    标签: javascript iframe


    【解决方案1】:

    Javascript 不能直接访问 IFrame 中的函数。不过,IFrame 可以访问其父级中的函数。

    因此,例如,如果您的主页公开了一个方法 RegisterCallback,则 IFrame 可以将其函数之一作为参数调用它。然后页面可以存储对该函数的引用并在其他时间调用它(使用任何参数...)

    更新:添加示例代码

    下面的代码是两个文件; index.html 是带有 iframe 的母版页,child.html 是 iframe 内的页面。

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

    我故意将子 iframe 包含了两次,以说明可以使用此技术注册任意数量的子 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”调用。然后由孩子的终点来做一些好事。在这种情况下,改变它自己的背景颜色。

    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”调用回调时,它会转身并将自己的主体背景颜色设置为该值。

    【讨论】:

    • 你能举个例子吗?主页是什么意思? iframe2 父级?
    • 更新了我的答案以提供建议技术的深入示例。如果觉得有用,请点赞。
    【解决方案2】:

    如果您的所有文档共享相同的来源,它应该可以工作,所以调用

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

    从某个框架内将调用来自邻居 iframe 的 func。

    看看 Firefox 中的 hacky 简单化 datauri 示例(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>
    

    【讨论】:

      【解决方案3】:
      // 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();
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2012-04-05
        • 2021-07-03
        • 2017-04-07
        • 2020-03-09
        • 1970-01-01
        • 2019-02-17
        • 1970-01-01
        相关资源
        最近更新 更多