jQuery更改Iframe外部的div的CSS

讓我先給大家，我的代碼：

<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外部和之前調用的。

如何在我的示例中做出該錯誤或錯誤？

來源

2014-10-28 user2942786

您是否有權訪問旁邊和外部的iframe？ – 2014-10-28 00:20:29

您無法從其中訪問iframe外部的DOM。 – jhawes 2014-10-28 00:28:02

使用來自服務器外部的內容訪問iFrame的內容是一個安全問題，稱爲"cross origin"，不允許。

來源

2014-10-28 00:25:22

下面的方法將在IE8及以上的工作，如果你有機會獲得iframe和父代碼都：

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

來源

2014-10-28 00:27:06

jQuery更改Iframe外部的div的CSS

回答

相關問題