通過刪除的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