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的内容是一个名为"cross origin"的安全问题，不允许这样做。

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

jQuery在iframe之外更改div的CSS

2 个答案: