Question

我有一个带有SWF多图像上传器的编辑器。由于并非所有人都需要在文章中上传图片，因此我需要在必要时动态加载此图片上传器。我必须在iframe中加载它，因为上传器需要一些外部脚本才能加载。因为我需要它的回调变量供我的编辑器使用我想知道iframe中的脚本是否可以与主页面中的脚本进行交互。或者，如果我不能这样做，那么另一种方法是什么？

Answer 1

如果他们在同一个域名，是的。

parent对象是iframe的父窗口。

如果在父窗口的全局范围内有变量a，则可以在iframe中对其进行操作，如下所示：

parent.a = "new value";

同样，如果a是父窗口全局范围内的函数，则可以这样调用它：

parent.a(args);

Answer 2

Html5中的postMessage，受Internet Explorer 8.0 +，Firefox 3.0 +，Safari 4.0 +，Chrome 1.0+和Opera 9.5+支持，是我一直在使用它的方式。如果您不介意IE7及早期版本缺乏支持，请按照以下步骤实现。

主窗口中的Javascript：

window.addEventListener("message", receiveMessage, false);  

function receiveMessage(event){ 
    var source = event.source.frameElement; //this is the iframe that sent the message
    var message = event.data; //this is the message
    //do something with message
}

iframe中的Javascript;

var message='hello, big window!'; //could be of any type, string, number, array, object, have fun
window.parent.postMessage(message,'*'); //the '*' has to do with cross-domain messaging. leave it like it is for same-domain messaging.

当然你可以反过来做，让主窗口向iframe发送消息，并以这种方式进行一些跨窗口对话。

Answer 3

扩展安迪的回答Can scripts in iframe interact with scripts in the main page：

使用jQuery.postMessage插件http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

浏览器测试了Internet Explorer 6-8，Firefox 3，Safari 3-4，Chrome，Opera 9。

Answer 4

iframe中的脚本是否可以与主页中的脚本进行交互

仅当iframe及其父级具有完全相同的域时，由于same origin policy（MDC link）。

Answer 5

如果iframe来自不同的域，但您可以控制内容，则可以通过几种不同的方式在两者之间进行通信。最简单的是通过iFrame的URL中的键/值对“对话”，因为父和iFrame都可以访问它。

更复杂的方法是使用iFrame代理，这里描述得很好：http://www.julienlecomte.net/blog/2007/11/31/使用Yahoo Pipes来回传送消息。

iframe中的脚本是否可以与主页面中的脚本进行交互

5 个答案: