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

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

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

当前回答

虽然其中一些解决方案可能有效,但没有一个符合最佳实践。许多分配全局变量,您可能会发现自己调用多个父变量或函数,导致混乱、易受攻击的命名空间。

为了避免这种情况,可以使用模块模式。在父窗口:

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: the Good Parts”的继承章节中描述的模式。你也可以在w3的页面上了解更多Javascript的最佳实践。https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals

其他回答

虽然其中一些解决方案可能有效,但没有一个符合最佳实践。许多分配全局变量,您可能会发现自己调用多个父变量或函数,导致混乱、易受攻击的命名空间。

为了避免这种情况,可以使用模块模式。在父窗口:

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: the Good Parts”的继承章节中描述的模式。你也可以在w3的页面上了解更多Javascript的最佳实践。https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals

使用Firefox和Chrome浏览器,您可以使用:

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

如果myfunction同时出现在iframe和parent中,父函数将被调用。

我把这个作为一个单独的答案,因为它与我现有的答案无关。

这个问题最近在从引用子域的iframe访问父节点时再次出现,现有的修复不起作用。

这一次的答案是修改文件。父页面的域和iframe必须相同。这将使同源策略检查误以为它们共存于完全相同的域中(子域被视为不同的主机,同源策略检查失败)。

将以下内容插入到iframe中页面的<head>以匹配父域(根据您的doctype进行调整)。

<script>
    document.domain = "mydomain.com";
</script>

请注意,这将在本地主机开发时抛出一个错误,所以使用如下检查来避免错误:

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.com";
} 

这是为有需要的人准备的。如果它们使用不同的协议,Ash Clarke的解决方案就不起作用,所以如果您使用SSL,请确保您的iframe也使用SSL,否则将破坏功能。他的解决方案确实适用于域名本身,所以谢谢你。

你可以使用

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>