从父页面在iframe中调用JavaScript代码

JavaScript

流云

2020-03-11

基本上,我有一个iframe嵌入页面的页面,并且iframe有一些需要从父页面调用的JavaScript例程。

现在,相反的操作非常简单,因为您只需要调用parent.functionName(),但是不幸的是,我需要恰好相反。

请注意,我的问题是不会改变的源URLiframe,但是调用在定义的函数iframe

第855篇《从父页面在iframe中调用JavaScript代码》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
小宇宙 2020.03.11

尝试一下 parent.myfunction()

前端逆天 2020.03.11

If you want to invoke the JavaScript function on the Parent from the iframe generated by another function ex shadowbox or lightbox.

You should try to make use of window object and invoke parent function:

window.parent.targetFunction();
JinJin神奇宝儿 2020.03.11

同样的事情,但是更简单的方法是如何从iframe中的页面刷新父页面只需调用父页面的函数即可调用javascript函数来重新加载页面:

window.location.reload();

或直接在iframe中的页面上执行此操作:

window.parent.location.reload();

两者都可以。

米亚猴子 2020.03.11

我找到了一个很好的解决方案。

如您所说,执行位于父文档中的代码相当容易。这就是我的代码的基础,反之亦然。

加载iframe时,我会调用位于父文档上的函数,并将对iframe文档中本地函数的引用作为参数传递。现在,通过此引用,父文档可以直接访问iframe的功能。

例:

在父项上:

function tunnel(fn) {
    fn();
}

在iframe上:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

加载iframe时,它将调用parent.tunnel(YourFunctionReference),它将执行参数中接收的功能。

如此简单,而不必处理各种浏览器中的所有非标准方法。

伽罗小哥 2020.03.11
       $("#myframe").load(function() {
            alert("loaded");
        });
小哥卡卡西 2020.03.11

可以从中调用父级JS函数iframe,但是仅当父级和加载到的页面iframe都来自同一个域(即abc.com)并且都使用相同的协议(即两者都在http://上)时才可以https://

在以下情况下,呼叫将失败:

  1. 父页面和iframe页面来自不同的域。
  2. 他们使用的协议不同,一个协议位于http://,另一个协议位于https://。

对此限制的任何解决方法都是极其不安全的。

例如,假设我注册了域名superwinningcontest.com,并发送了指向人们电子邮件的链接。当他们加载主页时,我可以iframe在其中隐藏几秒钟并阅读他们的Facebook提要,查看最近的Amazon或PayPal交易,或者-如果他们使用的服务没有实现足够的安全性,则可以从他们的账户中转出资金帐户。这就是JavaScript仅限于相同域和相同协议的原因。

神奇启人 2020.03.11

在IFRAME中,将函数公开给window对象:

window.myFunction = function(args) {
   doStuff();
}

要从父页面进行访问,请使用以下命令:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android