11

这是我的代码http://my-localhost.com/iframe-test.html

<html>
<head><title>Welcome Iframe Test</title></head>
<body>
<iframe src="http://www.my-website.com/index.html" width="500" height="500"></iframe>
<script type="text/javascript">
function alertMyMessage(msg){
    alert(msg);
}
</script>
</body>
</html>

这是代码http://www.my-website.com/index.html

<html>
<head></title>Welcome to my Server</title></head>
<body>
<h1>Welcome to My Server</ht>
<a href="javascript:void(0)" title="Click here" onClick="parent.alertMyMessage('Thanks for Helping me')">Click Here</a>
</body>
</html>

当我单击“单击此处”链接时。我得到以下错误。

未捕获的安全错误：阻止具有来源“ http://www.my-website.com ”的框架访问具有来源“ http://my-localhost.com ”的框架。协议、域和端口必须匹配。

请帮助我解决此问题，或为此提供其他解决方案。

4

2 回答 2

19

您无法访问在不同来源的框架中加载的页面的 DOM。出于安全原因，这被阻止（想象一下您访问的随机网站在隐藏的 iframe 中打开您的网络邮件服务，您可以看到原因）。

最接近的方法是使用web 消息 api在它们之间传递消息，并且只有在您控制两个网站的情况下。

在一个页面中，编写一个函数来处理消息，然后将其添加为消息事件侦听器。

function receiveMessage(event)
{
  alert(event.data);
}

addEventListener("message", receiveMessage, false);

另一方面，发送消息：

parent.postMessage("This is a message", "*");

有关更多信息，请参阅MDN

于 2013-10-16T15:11:36.453 回答
13

您可以使用 postMessage！

家长

if (window.addEventListener) {
    window.addEventListener ("message", receive, false);        
}
else {
    if (window.attachEvent) {
        window.attachEvent("onmessage",receive, false);
    }
}

function receive(event){
    var data = event.data;
    if(typeof(window[data.func]) == "function"){
        window[data.func].call(null, data.params[0]);
    }
}

function alertMyMessage(msg){

    alert(msg);
}

框架

function send(){
    window.parent.window.postMessage(
        {'func':'alertMyMessage','params':['Thanks for Helping me']},
        'http://www.my-website.com'
    );
}

参考

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

于 2013-10-16T15:23:30.687 回答