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）。

如果我能澄清任何事情，请告诉我，祝你好运！：）

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()

e.g。

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

Answer 4

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

跨域JavaScript通信

4 个答案: