2

是否可以将在 iframe 中定义的 javascript 函数注入到父窗口中,以便即使在删除 iframe 后也可以使用它?这是我所做的:在 iframe 中我有:

var f = function(){console.log("iframe function")}
window["iframeFunction"] = f;

父级可以成功调用该函数,直到 iframe 可用..之后它不起作用。

4

2 回答 2

0

假设这是您的 iframe (ifr.htm)-

<html>
<head>
    <script type="text/javascript">
        function func() {
            window.top.window.f = function() {
                alert('iframe hack');
            }
        }
        window.onload = function() {
            alert('iframe loaded');
            func();
        };
    </script>
</head>
<body>
    this is the test iframe.
</body>
</html>

这是你的父窗口-

<html>
<head>
    <script type="text/javascript">
        window.onload = function() {
            i = document.getElementById('iframe'); //remove the iframe
            i.parentNode.removeChild(i);
            window.f(); //you can still call f() method     
        };
    </script>
</head>
<body>
    this is the parent window.
            <iframe src="ifr.htm" id="iframe"></iframe>
</body>
</html>

这基本上使用访问父级top并向其添加一个函数。因此,即使iframe从 DOM 中删除了 ,该函数仍将保留,因为它已添加到父级。

于 2013-03-15T14:51:25.663 回答
0

根据浏览器支持要求,我会推荐postMessage。优点是:

  1. 不需要污染父级的全局命名空间(在所需范围之外发生冲突/可用性的可能性较小)
  2. 通知家长新功能的可用性(而不是假设或轮询更改)

编辑:即使您希望使用 iframe 指定的标签在父级的全局命名空间中使用该功能,第 2 点仍然适用。

编码:

// In your iframe
var f = function(){console.log("iframe function")}
window.top.postMessage({f:f}, '*');

// In the parent
window.addEventListener('message', function capturePassedFunction(e){
    // If you want to keep this in scope
    var f    = e.data.f;
    // You can still chuck it on the `window` object if you want!
    window.f = e.data.f;
}, false);
于 2013-03-15T14:55:22.423 回答