Question

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

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

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

Answer 1

假设这是你的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访问父级并向其添加一个函数。因此，即使从DOM中删除iframe，该函数仍将保留，因为它已添加到父级。

Answer 2

Depending on browser support要求，我建议postMessage。优点是：

不需要污染父级的全局命名空间（在所需范围之外的碰撞/可用性的可能性更小）
通知父母新功能的可用性（而不是假设或轮询更改）

编辑：即使您希望在父级的全局命名空间中使用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);

由删除的iframe注入的Javascript函数

2 个答案: