通过删除的iframe注入的Javascript函数

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访问父级并为其添加功能。 因此，即使将iframe从DOM中删除，该功能仍会保留，因为它已添加到父项中。

Answer 2

根据浏览器支持要求，我建议使用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 个解决方案

解决方案1
0 2013-03-15 14:51:25

解决方案2
0 2013-03-15 14:55:22

通过删除的iframe注入的Javascript函数

问题描述

2 个解决方案

解决方案1 0 2013-03-15 14:51:25

解决方案2 0 2013-03-15 14:55:22

解决方案1
0 2013-03-15 14:51:25

解决方案2
0 2013-03-15 14:55:22