關閉iframe跨域

Question

我想在這里做一些類似於Clipper應用程序的東西http://www.polyvore.com/cgi/clipper

我可以讓iframe出現在另一個網站（跨域）中。 但我無法使“關閉”按鈕起作用。

這是我使用的，但它不適用於跨域（基本上刪除iframe元素）

window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));

你能幫我嗎？ 謝謝。

Answer 1

你應該使用一個抽象的庫（例如http://easyxdm.net/wp/ ，未經過測試）。 片段ID消息傳遞可能無法在所有瀏覽器中使用，並且有更好的方法，例如postMessage 。

但是，您的示例（Clipper）正在使用稱為片段ID消息傳遞的黑客。 這可以是跨瀏覽器，前提是包含iframe的頁面是頂級。 換句話說，總共有兩個級別。 基本上，子項設置父項的片段，父項監視它。

這是與Clipper類似的方法：

parent.html

<html>
<head>
<script type="text/javascript">
function checkForClose()
{
    if(window.location.hash == "#close_child")
    {
      var someIframe = document.getElementById("someId");
      someIframe.parentNode.removeChild(someIframe);
    }
    else
    {
      setTimeout(checkForClose, 1000)
    }
}
setTimeout(checkForClose, 1000);
</script>
</head>
<body>
<iframe name="someId" id="someId" src="child.html" height="800" width="600">foo</iframe>
</body>
</html>

child.html：

<html>
<head>
<script type="text/javascript">
setTimeout(function(){window.parent.location.hash = "close_child";}, 5000);
</script>
<body style="background-color: blue"></body>
</html>

EDIT2：跨域和獨立控制是不同的。 我挖掘了（嚴重縮小/混淆）Polyvore代碼以查看它是如何工作的（順便說一下，它不在Firefox中）。 首先請記住，諸如Clipper之類的bookmarklet在它們啟動時會在頁面的上下文中生效。 在這種情況下，bookmarklet加載一個腳本，該腳本又運行一個生成iframe的init函數，但也運行：

Event.addListener(Event.XFRAME, "done", cancel);

如果你深入了解addListener，你會發現（美化）：

if (_1ce2 == Event.XFRAME) {
                        if (!_1cb3) {
                            _1cb3 = new Monitor(function () {
                                return window.location.hash;
                            },
                            100);
                            Event.addListener(_1cb3, "change", onHashChange);
                        }
                    }

取消包括：

removeNode(iframe);

現在，唯一剩下的部分是iframe頁面加載另一個帶有ClipperForm.init函數的腳本，該函數包括：

Event.addListener($("close"), "click", function () {
            Event.postMessage(window.parent, _228d, "done");
        });

所以我們清楚地看到他們正在使用片段ID消息。

Answer 2

嘗試隱藏iframe的內容，不要擔心實際刪除父級中的iframe元素。

Answer 3

還有另一個舊哈希黑客的實現。 它向后兼容，簡單的javascript，並且非常容易實現：

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

關閉iframe跨域

問題描述

3 個解決方案

解決方案1
19 已采納 2010-02-02 05:28:05

解決方案2
1 2010-02-02 05:33:19

解決方案3
0 2010-11-23 00:31:31

關閉iframe跨域

問題描述

3 個解決方案

解決方案1 19 已采納 2010-02-02 05:28:05

解決方案2 1 2010-02-02 05:33:19

解決方案3 0 2010-11-23 00:31:31

解決方案1
19 已采納 2010-02-02 05:28:05

解決方案2
1 2010-02-02 05:33:19

解決方案3
0 2010-11-23 00:31:31