如何根据iframe内容从父窗口触发事件？

Question

我正在使用iframe创建一个小部件，我想在特定事件中隐藏iframe。

假设 main.html 文件包含：

<div id="my_widget">
  <iframe src="www.mysite.com/main.html" width="50%" frameborder="0" height="550" id="my_iframe">Error uploading the frame.</iframe>
</div>

widget.html 文件包含：

<div id="widget-status-div" status="success"></div> 

我尝试在widget.html文件的末尾添加一些脚本来访问父窗口（main.html），如：

<script type="text/javascript">       
    setTimeout(function(){
      parent.$("#my_widget").fadeOut(300, function() { parent.$("#my_widget").remove(); });
    }, 3000);       
</script>

但不幸的是它没有用。

我尝试做的另一件事是在父窗口（main.html）设置 setInterval（check_iframe，5000）以继续检查 widget-status-div div在iframe每5秒，但问题是我无法以某种方式检查iframe的内容（或者我做错了）。

任何帮助都将受到高度赞赏。

谢谢

Answer 1

由于同源政策，这将失败最多。它将JavaScript访问限制在一个协议和域之间。

有关此内容的详细信息，请查看wiki entry

要实现跨源通信，您可以使用定义的消息传递API here。

使用此API，您可以在一个文件上定义一个事件监听器，在另一个文件中定义一个触发器。

收听讯息：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

将消息发布到另一个文档：

var parentWindow = window.parent;

// When the popup has fully loaded, if not blocked by a popup blocker:

// This does nothing, assuming the window hasn't changed its location.
parentWindow.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

您可以在MDN Documentation

中查看完整示例