使用父級中的javascript編輯iframe的DOM

Question

所以我在A.html中有一個非常簡單的網站

<body>
    <p class="text">Some text</p>
</body>

另一個網站在B.html的iframe中顯示A

<body>
    <iframe id="frame" src="B.html" onload="onLoadHandler();"></iframe>
</body>

如果我在Google chrome瀏覽器中打開文件B，則一切都會按預期顯示。 但是，如果我在B.html中執行以下JavaScript代碼行（嘗試將iframe中p元素的顏色更改為粉紅色）

function onLoadHandler()
{
    var frameElement = document.getElementById('frame');
    var frameDocument = frameElement.contentWindow ? frameElement.contentWindow : frameElement.contentDocument.defaultView;

    var x = frameDocument.getElementsByClassName("text");
    x[0].style.backgroundColor = "pink";
}

我在第二行收到以下錯誤：

未捕獲到的SecurityError：阻止了源為“ null”的幀訪問源為“ null”的幀。 協議，域和端口必須匹配。

這只是一個虛擬測試，真正的場景是我們擁有網站www.company.com，並且在iframe中運行www.verysecurebank.com，我們希望編輯該iframe中某些按鈕的樣式。 是的，域名永遠不會匹配。

不過，我想知道為什么瀏覽器會將此視為跨站點腳本，但是如果您使用開發人員工具（f12），則可以操縱iframe的任何部分，而瀏覽器本身不會出現問題？ 我們可以使用開發人員工具將iframe中的所有按鈕成功設為藍色，但是我們無法使用包含iframe的父html中的javascript實現它。

Answer 1

判斷是否存在跨域的三個規則：

不同的協議；
不同的端口；
不同的域名。

前端開發人員無法解決第一個和第二個問題。 作為最后一個，如果兩個域具有相同的主域名，則可以通過將document.domain設置為相同的主域名來解決。

使用父級中的javascript編輯iframe的DOM

問題描述

1 個解決方案

解決方案1
0 2015-04-13 15:34:40

使用父級中的javascript編輯iframe的DOM

問題描述

1 個解決方案

解決方案1 0 2015-04-13 15:34:40

解決方案1
0 2015-04-13 15:34:40