2

这是一个情况。我的客户将拥有自己的网页。在那个页面上,他们可能有一个 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什么?

4

4 回答 4

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 感到负担。

需要注意的是,我是在脑海中写下这段代码的,它很可能充满了错别字。我以前使用过这个库来完成类似的目标,我希望这个答案对你来说是一个有用的起点(以及插件文档)。

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

于 2012-06-01T06:38:26.927 回答
0

您可以尝试 Ben Alman 的这个 jquery 插件,前提是您可以在您的服务器和您的客户端服务器上运行该插件 - 请参阅示例以了解跨域执行 js 的方法:

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

于 2012-05-31T08:26:10.633 回答
0

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

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

例如

document.getElementsByName("iframe1")[0].contentWindow.test()
于 2012-05-31T09:32:12.350 回答
-1

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

于 2012-05-31T06:50:54.397 回答