跨域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到达父级来监听事件。

解决此问题的一种方法是在页面之间传递消息。 这将要求您的客户在他们的页面以及指向您服务器的iFrame中包括其他JavaScript。 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了。

需要注意的是，我将此代码写在了脑海中，很容易出现错别字。 我之前曾使用该库来实现类似的目标，并且希望这个答案对您（以及插件文档 ）是一个有用的起点。

让我知道是否可以澄清任何事情，祝您好运！ :)

Answer 2

您可以尝试使用Ben Alman提供的jquery插件，前提是该插件可以同时在您的客户端服务器和客户端服务器上运行-请参阅示例以了解跨域执行js的方法：

http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

Answer 3

让我们考虑一下，如果您有一个名为test()的函数在Iframe下加载，那么您可以按以下方式访问该test()函数

document.getElementsByName("name of iframe")[0].contentWindow.functionName()

例如

document.getElementsByName("iframe1")[0].contentWindow.test()

Answer 4

进行跨域请求的常见模式之一是使用JSONP 。