Javascript 从iframe调用父窗口函数_Javascript_Iframe_Onclick

Javascript 从iframe调用父窗口函数

javascript iframe

Javascript 从iframe调用父窗口函数,javascript,iframe,onclick,Javascript,Iframe,Onclick,我想从iframe调用父窗口JavaScript函数 <script> function abc() { alert("sss"); } </script> <iframe id="myFrame"> <a onclick="abc();" href="#">Call Me</a> </iframe> 函数abc（） { 警报（“sss”）； } 看返回对当前窗口或

我想从iframe调用父窗口JavaScript函数

<script>
    function abc()
    {
        alert("sss");
    }
</script>

<iframe id="myFrame">
    <a onclick="abc();" href="#">Call Me</a>
</iframe>


函数abc（）
{
警报（“sss”）；
}

看

返回对当前窗口或子帧的父级的引用

如果窗口没有父窗口，则其父属性是对其自身的引用

当在

、

或

中加载一个窗口时，它的父窗口就是嵌入该窗口的元素的窗口。

我最近不得不找出为什么这不起作用

要从子iframe调用的javascript需要位于父级的头部。如果脚本位于正文中，则该脚本在全局范围中不可用

<head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="parent.abc();" href="#">Click Me</a>
    </iframe>
</body>


函数abc（）{
警报（“sss”）；
}

希望这能帮助任何再次遇到此问题的人。

您可以使用

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（）{
警报（“sss”）；
}

我将此作为单独的答案发布，因为它与我现有的答案无关

最近，当从引用子域的iframe访问父级时，再次出现了此问题，而现有的修复程序不起作用

这次的答案是将父页面的document.domain和iframe修改为相同。这将愚弄用户，使他们认为它们在完全相同的域上共存（子域被视为不同的主机，并且无法通过同源策略检查）

将以下内容插入iframe中页面的

，以匹配父域（根据您的doctype进行调整）

Ash Clarke为子域提供的解决方案非常有效，但请注意，您需要包括document.domain=“mydomain.com”；在iframe页面的头部和父页面的头部，如链接中所述

为JavaScript DOM访问实现的同源策略的一个重要扩展（但不适用于大多数其他类型的同源检查）是，共享一个公共顶级域的两个站点可能会选择通信，尽管“同一主机”出现故障通过相互将各自的document.domain DOM属性设置为其当前主机名的同一限定右侧片段进行检查。例如，如果和都将document.domain设置为“example.com”，则出于DOM操作的目的，它们将从同一原点开始

为那些需要它的人提供另一个补充。Ash Clarke的解决方案在使用不同的协议时不起作用，因此请确保如果您使用SSL，您的iframe也在使用SSL，否则会破坏该功能。不过，他的解决方案确实适用于域本身，因此非常感谢。

出于安全考虑，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>


函数abc（）{
警报（“sss”）；
}
//iframe的窗口
var innerWindow=document.getElementById（'myFrame'）.contentWindow；
innerWindow.abc=abc；

希望这有帮助。：）

使用Firefox和Chrome，您可以使用：

<a href="whatever" target="_parent" onclick="myfunction()">

如果iframe和parent中都存在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的页面上了解更多Javascript的最佳实践

Window.postMessage（）此方法可安全地启用

跨源

通信

如果您可以访问父页面代码，则可以调用任何父方法，也可以直接从

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);
}

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

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);
}

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

更新：

安全注意事项：

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);
}

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

如果您知道其他窗口的文档应位于何处，请始终提供特定的targetOrigin，而不是

。未能提供特定目标会泄露您发送到任何感兴趣的恶意站点的数据（评论）

参考文献：

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);
}

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

本文中提到的任何技术都不适用于Chrome。有什么解决方案吗？如果我没记错的话，如果iframe的父域与iframe的域不同，我就无法按预期工作。抱歉，这不是一个解决方案，但它可能会解释为什么它不起作用。是的。我知道这是因为不同的领域，但没有办法解决这个问题吗？我刚刚发布了解决您问题的方法。请看另一个答案。根据同源策略确定规则（请参阅：），子域被视为与域的子域不同的主机名。如果还没有，可以尝试将document.domain设置为子域？在localhost中测试如何？有解决方法吗？请参阅：“请注意，这将在本地主机开发中引发错误，因此请使用如下检查以避免错误”。值得注意的是（至少在Google Chrome中），父级和子级都必须设置document.domain，即使其中一个已经“正确”！示例：父对象是

Example.com

iframe是

abc.Example.com

，那么父对象和iframe都必须调用

document.domain=“Example.com”

是的，我在这里输入了一个错误：“iframe中的页面相同。”应该是“页面和iframe相同”。。。。。谢谢对于if（），为什么不使用if（document.domain！=“mydoma”