jQuery在Iframe外部更改div的CSS

Question

現在，我正在一個簡單的腳本。

首先讓我給您我擁有的所有代碼：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function SuperWebF1() {
        $("#outerdiv").css({"border":"2px solid #e39f9f"});
        alert('SportsDirect.bg: Моля, първо посочете желания от Вас цвят!');
    }
</script>
<div id="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>

iframe會顯示以下按鈕：

<button type="button" class="button" onclick="parent.SuperWebF1();">Clickme</button>

因此，當將按鈕按入iframe時，我想更改保存iframe的div的CSS。

請注意，jQuery代碼在iframe之外和之前被調用。

我該怎么做？在我的例子中我的錯誤在哪里？

Answer 1

將iFrame的內容與服務器外的內容一起訪問是一個安全問題，稱為“跨源” ，是不允許的。

Answer 2

如果您可以同時訪問iframe和父代碼，則以下方法將在IE8及更高版本中起作用：

在iframe中：

<button type="button" class="button" onclick="parent.postMessage("button_clicked", "http://parent-domain.com");">Clickme</button>

在家長中：

<script>
function SuperWebF1() 
{
    $("#outerdiv").css({"border":"2px solid #e39f9f"});
    alert('SportsDirect.bg: Моля, първо посочете желания от Вас цвят!');

}

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  if (e.data == "button_clicked") {
      SuperWebF1();
  }
},false);
</script>

有關安全性和其他問題，請參見https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage