基本上,我在页面中嵌入了一个iframe,该iframe有一些需要从父页面调用的JavaScript例程。
现在相反的是相当简单,因为你只需要调用parent.functionName(),但不幸的是,我需要的恰恰相反。
请注意,我的问题不是改变iframe的源URL,而是调用iframe中定义的函数。
基本上,我在页面中嵌入了一个iframe,该iframe有一些需要从父页面调用的JavaScript例程。
现在相反的是相当简单,因为你只需要调用parent.functionName(),但不幸的是,我需要的恰恰相反。
请注意,我的问题不是改变iframe的源URL,而是调用iframe中定义的函数。
当前回答
如果iFrame的目标和包含的文档在不同的域中,之前发布的方法可能不起作用,但有一个解决方案:
例如,如果文档A包含一个包含文档B的iframe元素,并且文档A中的脚本在文档B的Window对象上调用postMessage(),那么消息事件将在该对象上触发,标记为源自文档A的Window。文档A中的脚本可能如下所示:
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');
要为传入事件注册事件处理程序,脚本将使用addEventListener()(或类似的机制)。例如,文档B中的脚本可能是这样的:
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.origin == 'http://example.com') {
if (e.data == 'Hello world') {
e.source.postMessage('Hello', e.origin);
} else {
alert(e.data);
}
}
}
该脚本首先检查域是否是预期的域,然后查看消息,它可以将消息显示给用户,也可以通过将消息发送回最初发送消息的文档来进行响应。
通过http://dev.w3.org/html5/postmsg/ 49岁
其他回答
假设你的iFrame的id是"targetFrame",你想调用的函数是targetFunction():
document.getElementById('targetFrame').contentWindow.targetFunction();
你也可以使用window.frames而不是document.getElementById来访问帧。
// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction();
我找到了一个很好的解决办法。
正如您所说,执行位于父文档中的代码相当容易。这是我代码的基础,做的正好相反。
当我的iframe加载时,我调用父文档上的一个函数,将一个引用作为参数传递给位于iframe文档中的一个局部函数。 父文档现在可以通过这个引用直接访问iframe的函数。
例子:
在父节点上:
function tunnel(fn) {
fn();
}
在iframe中:
var myFunction = function() {
alert("This work!");
}
parent.tunnel(myFunction);
当iframe加载时,它将调用parent.tunnel(YourFunctionReference),它将执行parameter中接收到的函数。
这很简单,不需要处理来自各种浏览器的所有非标准方法。
这里有一些需要注意的怪癖。
HTMLIFrameElement.contentWindow is probably the easier way, but it's not quite a standard property and some browsers don't support it, mostly older ones. This is because the DOM Level 1 HTML standard has nothing to say about the window object. You can also try HTMLIFrameElement.contentDocument.defaultView, which a couple of older browsers allow but IE doesn't. Even so, the standard doesn't explicitly say that you get the window object back, for the same reason as (1), but you can pick up a few extra browser versions here if you care. window.frames['name'] returning the window is the oldest and hence most reliable interface. But you then have to use a name="..." attribute to be able to get a frame by name, which is slightly ugly/deprecated/transitional. (id="..." would be better but IE doesn't like that.) window.frames[number] is also very reliable, but knowing the right index is the trick. You can get away with this eg. if you know you only have the one iframe on the page. It is entirely possible the child iframe hasn't loaded yet, or something else went wrong to make it inaccessible. You may find it easier to reverse the flow of communications: that is, have the child iframe notify its window.parent script when it has finished loaded and is ready to be called back. By passing one of its own objects (eg. a callback function) to the parent script, that parent can then communicate directly with the script in the iframe without having to worry about what HTMLIFrameElement it is associated with.
如果你想从另一个函数生成的iframe中调用父节点上的JavaScript函数,例如shadowbox或lightbox。
你应该尝试使用窗口对象和调用父函数:
window.parent.targetFunction();
$("#myframe").load(function() {
alert("loaded");
});