我想从iframe调用父窗口JavaScript函数。
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
我想从iframe调用父窗口JavaScript函数。
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
Answers:
<a onclick="parent.abc();" href="#" >Call Me </a>
返回对当前窗口或子帧的父级的引用。
如果窗口没有父窗口,则其父属性是对自身的引用。
当在一个被加载的窗口<iframe>
,<object>
或者<frame>
,它的父是与元件嵌入窗口的窗口。
alert
将调用哪两个?父alert
函数或iframe alert
函数,以防parent.abc();
在iframe上调用?
最近,我不得不找出为什么这也行不通。
您要从子iframe调用的javascript必须位于父文件的开头。如果它在正文中,则脚本在全局范围内不可用。
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>
希望这对再次遇到此问题的人有所帮助。
此方法可安全启用 cross-origin
通信。
而且,如果您有权访问父页面代码,则可以调用任何父方法以及可以直接从传递任何数据Iframe
。这是一个小例子:
父页面:
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}
iframe代码:
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *
更新:
安全说明:
*
如果您知道另一个窗口的文档应位于何处,请始终提供特定的targetOrigin,而不是NOT 。未能提供特定目标的信息会泄露您发送到任何感兴趣的恶意站点的数据(ZalemCitizen的评论)。
参考文献:
我将其发布为单独的答案,因为它与我现有的答案无关。
最近再次出现此问题,原因是该问题是通过从引用子域的iframe访问父项而导致的,现有的修复程序不起作用。
这次的答案是将父页面和iframe的document.domain修改为相同。这将愚弄相同的原始策略检查以为它们在完全相同的域中共存(子域被视为不同的主机,并且通过相同的原始策略检查失败)。
将以下内容插入到<head>
iframe页面的中,以匹配父域(根据您的doctype进行调整)。
<script>
document.domain = "mydomain.com";
</script>
请注意,这将在localhost开发上引发错误,因此请使用以下检查方法来避免该错误:
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
example.com
iframe为abc.example.com
,则父级和iframe都必须调用document.domain = "example.com"
您可以使用
window.top
请参阅以下内容。
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>
abc()
只有在iframe中(而不是在父页面上)function abc()
声明时,调用才有效。 window.top.abc()
脱离iframe进入父文档。
Ash Clarke为子域提供的解决方案效果很好,但请注意,您需要包括document.domain =“ mydomain.com”; 如链接中所述,在iframe页面的顶部和父页面的顶部同源策略的检查
对为JavaScript DOM访问实现的同一来源策略(但不是针对其他大多数相同来源检查的大多数实施方式)的一个重要扩展是,共享一个公共顶级域的两个站点可能会选择通信,尽管“同一主机”失败通过相互将它们各自的document.domain DOM属性设置为它们当前主机名的相同的,右侧的右片段来进行检查。例如,如果http://en.example.com/和http://fr.example.com/都将document.domain设置为“ example.com”,则从那时起,它们将被认为是相同来源的。 DOM操作的目的。
document.domain
多少?
localhost
或机器的ip地址(通常是127.0.0.1
),具体取决于url地址栏中的内容。
由于安全原因,parent.abc()仅可在同一域上使用。我尝试了这种解决方法,我的工作完美。
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById('myFrame').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>
希望这可以帮助。:)
使用Firefox和Chrome,您可以使用:
<a href="whatever" target="_parent" onclick="myfunction()">
如果iframe和父项中都存在myfunction,则将调用父项。
尽管其中一些解决方案可能会起作用,但它们都不遵循最佳实践。许多分配全局变量,您可能会发现自己对多个父变量或函数进行了调用,从而导致混乱,易受攻击的命名空间。
为避免这种情况,请使用模块模式。在父窗口中:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);
然后,在iframe中:
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};
这类似于Crockford的开创性著作“ Javascript:好的部分”的“继承”一章中描述的模式。您还可以在w3的页面上了解有关Java最佳实践的更多信息。https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals