基本上,我在页面中嵌入了一个iframe,该iframe有一些需要从父页面调用的JavaScript例程。
现在相反的是相当简单,因为你只需要调用parent.functionName(),但不幸的是,我需要的恰恰相反。
请注意,我的问题不是改变iframe的源URL,而是调用iframe中定义的函数。
基本上,我在页面中嵌入了一个iframe,该iframe有一些需要从父页面调用的JavaScript例程。
现在相反的是相当简单,因为你只需要调用parent.functionName(),但不幸的是,我需要的恰恰相反。
请注意,我的问题不是改变iframe的源URL,而是调用iframe中定义的函数。
当前回答
其中一些答案并没有解决CORS问题,或者没有明确地说明您将代码段放置在何处以使通信成为可能。
这里有一个具体的例子。假设我想点击父页面上的一个按钮,并让它在iframe中做一些事情。我是这么做的。
parent_frame.html
<button id='parent_page_button' onclick='call_button_inside_frame()'></button>
function call_button_inside_frame() {
document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}
iframe_page.html
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if(event) {
click_button_inside_frame();
}
}
function click_button_inside_frame() {
document.getElementById('frame_button').click();
}
要走另一个方向(点击iframe内的按钮调用iframe外的方法),只需切换代码片段所在的位置,并更改如下:
document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
:
window.parent.postMessage('foo','*')
其他回答
如果你想从另一个函数生成的iframe中调用父节点上的JavaScript函数,例如shadowbox或lightbox。
你应该尝试使用窗口对象和调用父函数:
window.parent.targetFunction();
假设你的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中,让你的函数对窗口对象是公共的:
window.myFunction = function(args) {
doStuff();
}
从父页面访问,使用这个:
var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);
如果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岁
其中一些答案并没有解决CORS问题,或者没有明确地说明您将代码段放置在何处以使通信成为可能。
这里有一个具体的例子。假设我想点击父页面上的一个按钮,并让它在iframe中做一些事情。我是这么做的。
parent_frame.html
<button id='parent_page_button' onclick='call_button_inside_frame()'></button>
function call_button_inside_frame() {
document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}
iframe_page.html
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if(event) {
click_button_inside_frame();
}
}
function click_button_inside_frame() {
document.getElementById('frame_button').click();
}
要走另一个方向(点击iframe内的按钮调用iframe外的方法),只需切换代码片段所在的位置,并更改如下:
document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
:
window.parent.postMessage('foo','*')