javascript - 跨域 JavaScript 通信

Question

这是一种情况。我的客户将拥有自己的网页。在那个页面上，他们可能有一个 iFrame，他们可以在其中显示位于我的服务器上的页面。在 iFrame 之外，它们会有简单的按钮，单击时应在 iFrame 中执行 javascript 函数。

所以基本上客户域上客户网页的代码应该是这样的

<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>

myserver.com/some_html_page.htm 的代码是

$("#TestButton").click(function(){
  alert("Hi");
});

我做了我的研究，我知道浏览器安全问题，但我想知道有什么方法可以处理这个问题，可能是 json 或什么？

Answer 1

正如您已经知道的那样(假定父项和子项位于不同的域中)，您绝对不能从子 iFrame 向上到达父项以监听事件。

解决此问题的一种方法是在页面之间传递消息。这将要求您的客户在其页面中包含额外的 javascript 以及指向您的服务器的 iFrame。这在带有 postMessage 的原生 javascript 中得到支持，但包括@Mark Price 建议的库将使您的生活更轻松。

举个例子:

客户页面:

...
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.postMessage.min.js"></script>

  <script type="text/javascript">       
    $(document).ready(function () {
      $("#TestButton").click(function(){
        jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
      });
    });
  </script>
</head> 

<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>

myserver.com/some_html_page.htm 上的代码:

...
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.postMessage.min.js"></script>

  <script type="text/javascript">
    // you will need to set this dynamically, perhaps by having your
    // clients pass it into the URL of the iFrame,
    // e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
    var source_origin = "clients_page.com/index.html"; 

    var messageHandler = function (data) {
      // process 'data' to decide what action to take...
      alert("Hi");
    };

    $.receiveMessage(messageHandler, source_origin);
  </script>
</head> 

可能最好将客户端代码捆绑到一个它们可以包含的库中，这样您的客户就不会负担编写自己的 javascript 的负担。

需要注意的是，这段代码是我随手写的，它很可能充满错别字。我以前使用过这个库来实现类似的目标，我希望这个答案对你来说是一个有用的起点(连同 plugin documentation )。

如果我能澄清任何事情，请告诉我，祝你好运! :)