在iframe中调用javascript函数
我有问题在父页面的iframe
调用JavaScript函数。 这是我的两个页面:
mainPage.html
<html> <head> <title>MainPage</title> <script type="text/javascript"> function Reset() { if (document.all.resultFrame) alert("resultFrame found"); else alert("resultFrame NOT found"); if (typeof (document.all.resultFrame.Reset) == "function") document.all.resultFrame.Reset(); else alert("resultFrame.Reset NOT found"); } </script> </head> <body> MainPage<br> <input type="button" onclick="Reset()" value="Reset"><br><br> <iframe height="100" id="resultFrame" src="resultFrame.html"></iframe> </body> </html>
resultFrame.html
<html> <head> <title>ResultPage</title> <script type="text/javascript"> function Reset() { alert("reset (in resultframe)"); } </script> </head> <body> ResultPage </body> </html>
(我知道document.all
不build议,但这个页面只能在IE浏览器内部查看,我不认为这是问题)
当我按下重置button,我得到“resultFramefind”和“resultFrame.Reset未find”。 它似乎有一个参考框架,但不能调用框架上的function,为什么呢?
使用:
document.getElementById("resultFrame").contentWindow.Reset();
访问iframe中的重置function
document.getElementById("resultFrame")
将获得代码中的iframe, contentWindow
将获得iframe中的窗口对象。 一旦你有了子窗口,你可以在这个上下文中引用javascript。
另请参阅这里特别是从bobince的答案。
而不是从文档中获取框架,尝试从窗口对象获取框架。
在上面的例子中改变这个:
if (typeof (document.all.resultFrame.Reset) == "function") document.all.resultFrame.Reset(); else alert("resultFrame.Reset NOT found");
至
if (typeof (window.frames[0].Reset) == "function") window.frames[0].Reset(); else alert("resultFrame.Reset NOT found");
问题在于,iframe中的javascript范围没有通过iframe的DOM元素公开。 只有窗口对象包含框架的javascript作用域信息。
为了更加健壮:
function getIframeWindow(iframe_object) { var doc; if (iframe_object.contentWindow) { return iframe_object.contentWindow; } if (iframe_object.window) { return iframe_object.window; } if (!doc && iframe_object.contentDocument) { doc = iframe_object.contentDocument; } if (!doc && iframe_object.document) { doc = iframe_object.document; } if (doc && doc.defaultView) { return doc.defaultView; } if (doc && doc.parentWindow) { return doc.parentWindow; } return undefined; }
和
... var el = document.getElementById('targetFrame'); getIframeWindow(el).reset(); ...
呼叫
window.frames['resultFrame'].Reset();
objectframe.contentWindow.Reset()
需要先引用帧中的顶层元素。
需要满足的首要条件是父代和iframe应该属于同一个来源。 一旦完成,孩子可以使用window.opener方法调用父代,父代可以像上面提到的那样为孩子做同样的事情
当你通过document.all访问resultFrame时,它只把它作为一个HTML元素,而不是一个窗口框架。 如果你有一个框架使用“this”自引用触发一个事件,你会得到同样的问题。
更换:
document.all.resultFrame.Reset();
附:
window.frames.resultFrame.Reset();
要么:
document.all.resultFrame.contentWindow.Reset();