从iframe调用父窗口函数

2020/10/07 01:41 · javascript ·  · 0评论

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

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

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

<a onclick="parent.abc();" href="#" >Call Me </a>

参见window.parent

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

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

当在一个被加载的窗口<iframe><object>或者<frame>,它的父是与元件嵌入窗口的窗口。

Window.postMessage()

此方法可以安全地进行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调用的javascript必须在父文件的开头。如果它在正文中,则该脚本在全局范围内不可用。

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

希望这对再次遇到此问题的人有所帮助。

我将其发布为单独的答案,因为它与我现有的答案无关。

最近再次出现此问题,原因是该问题是通过从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";
} 

您可以使用

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>

那些需要它的人的另一个补充。如果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>

希望这可以帮助。:)

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操作的目的。

使用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

本文地址:http://javascript.askforanswer.com/congiframediaoyongfuchuangkouhanshu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!