正如您已经知道的那样(鉴于父级和子级位于不同的域中),您绝对无法从子级 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 感到负担。
需要注意的是,我是在脑海中写下这段代码的,它很可能充满了错别字。我以前使用过这个库来完成类似的目标,我希望这个答案对你来说是一个有用的起点(以及插件文档)。
如果我能澄清任何事情,请告诉我,祝你好运!:)