iframe子页面和父页面互相调用问题

最新推荐文章于 2023-06-16 11:26:41 发布
最新推荐文章于 2023-06-16 11:26:41 发布
阅读量254 收藏
点赞数
分类专栏： iframe 文章标签： 子页面调用父页面方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gkx_960826/article/details/80235136
版权

1，子页面调用父页面方法

    window.parent.reloadList();

2，子页面调用顶级父页面方法

    top.window.parent.reloadList();

3，window.open打开的页面调用父页面方法

       window.opener.reloadList();

4，如果调用方法时报parent.reloadList not a function的时候，注意查看父页面方法是否写在window下（填坑）



gkx_960826
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe父页面与子页面互相调用
05-08
以一个简单的小例子讲述了iframe页面中的相互调用，此为iframe页面中又嵌套iframe的页面的例子，希望对大家有帮助
vue.js中使用iframe后，子页面调用不了父页面的方法和值
qq_43551769的博客
03-16 1802
1、场景 父页面： <div v-if='bloonArr[2].show' style="width:'80%';margin:0 5% 0 25%;"> <iframe src="test/son.html" ></iframe> </div> <script> var vmFather = new ...
iframe父页面调用子页面方法
沧海一粟
09-23 5138
<iframe id="applyFrame" class="tabConCss" style="width:86%;margin-left:7%;margin-top:10px;margin-right:7%" src="./tradeApply.html"></iframe> <script> //当iframe加载完成，调用iframe嵌套页面方法传递参数 //若找不到方法,可能是iframe还没有加载完成 $("#applyFrame").load(fu.
iframe父页面调用子页面方法，并且获取数据（无跨域）
weixin_48195664的博客
06-16 2561
以上就是 iframe父页面调用子页面方法，并且获取数据（无跨域）最难部分就是跨越了。一定要注意：父子页面两边都要监听，子页面监听父页面传过来的参数，再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。(注意：VUE的话将此方法写在mounted里边，如果是多次调取此方法的话，就换成window.onmessage=(e)=>{}2. 监听父页面传过来的参数来判断调取哪个方法。
iframe 父子页面方法调用
qq_42709302的博客
09-17 366
在写代码的时候经常会用到将一个网页嵌入到另一个网页中，w3c也规定了一个标签，这个标签本身就支持跨域，而且所有的浏览器都支持 iframe具有以下属性： 1、frameborder 设为1代表显示周围边框，设置为0不显示周围边框 2、height 设置iframe的高度 3、width 设置iframe的宽度 4、longdesc 属性值为URL 规定一个页面，该页面包含了有关 iframe 的较长描述 5、marginheight 定义 iframe 的顶部和底部的边距 6、marginwidth 定义
iframe父页面子页面相互调用方法
weixin_42782396的博客
09-12 3176
父页面寻找子页面元素：        window.frames["iframeName"].document.getElementsByClassName('div')[0]        $(document.getElementById("iframeId").contentWindow.document).find(".div")        $( window.frames["i...
利用JQuery操作iframe父页面、子页面的元素和方法汇总
10-19
JQuery，作为JavaScript的一个强大库，提供了一些方便的API来操作`iframe`及其内部元素，包括在父页面和子页面之间进行交互。本文将详细介绍如何使用JQuery操作`iframe`以及在父页面和子页面间进行元素和方法的交互...
子页面和父页面的相互调用
05-28
本文将深入探讨这个主题，介绍如何在HTML中实现子页面与父页面的互相调用，并通过示例代码`parent.html`和`childPage.html`来帮助理解。 首先，我们要明白在浏览器环境中，每个HTML页面都是一个独立的上下文，它们...
用js互相调用iframe页面内的js函数
09-28
在这个场景下，涉及到的一个常见需求就是如何用JavaScript在主页面与`iframe`页面之间互相调用函数，以便于进行更复杂的交互。 标题提到的问题是在各种浏览器中，尤其是考虑到跨浏览器兼容性时，如何用JS实现主页面...
iframe 父页面调用子页面方法
忆水思寒的博客
06-22 1252
<!--主页面中的JS代码--> <script type="text/javascript"> //调用子页面的方法. var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。 childWindow.subFunction(); //调用子页面中的subFunct
iframe父页面与子页面通信及相互调用方法
09-13
本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法（含JS、JQuery方法）
父窗口调用iframe子窗口方法
03-14
NULL 博文链接：https://terryang.iteye.com/blog/292913
在iframe中调用js父页面和子页面方法
08-08
NULL 博文链接：https://747017186.iteye.com/blog/1985110
iframe 父窗口和子窗口相互的调用方法集锦
01-19
一、父窗口调用iframe子窗口方法 1、HTML语法：<iframe name=”myFrame” src=”child.html”></iframe> 2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4、父窗口页面源码： 代码如下: <html> <head> [removed] function say() { alert(“parent.html——>I’m at par
实现动态嵌套Iframe、父子页面方法互相调用
weixin_43022750的博客
04-12 533
Iframe父子页面方法互相调用 应用于一个页面种嵌套一个iframe组件，src需要默认为空 示例： 父页面代码： <!doctype html> <h3>父页面</h3> <iframe id="zi" src="b.html" ></iframe> <br> <script> function getfu(){ alert("这里是父页面getfu的方法"); } function getZi
html中iframe父页面与子页面交互方法
wei042的博客
10-17 951
html中iframe父页面与子页面交互方法，其中包含JavaScript，jquery两种
iframe的父页面、子页面相互调用
09-22 381
最近编程时涉及到iframe的父页面与子页面相互调用的问题，以前每回都是先去查找，这回自己记录下来以后方便查找。 一、父页面调用子页面方法 1. $("#id",frames["iframename"].document).test(""); #id：指的是子页面的id iframename：iframe的name test("")：给该id的value赋值 主要应用于给子页面的某个i
iframe父子页面互相调用方法、获取变量、获取元素
lixiaonaaa的博客
12-22 3759
每次iframe父子页面交互的时候总是现查，总也记不住，所以今天来详细记载一下。以下均为jquery 写法。 1、iframe子页面调用父页面 （1）方法 parent.func() （2）变量 parent.value （3）jquery元素 $("div",parent.document) 2、父页面调用iframe子页面 （1）方法 $("#childrenIframeId").eq(0)[0].contentWindow.func(); （2）变量 $("#ch
iframe中如何子页面和父页面如何通信
最新发布
09-02
在iframe中，子页面和父页面之间可以通过以下几种方法进行通信： 一、postMessage方法： 子页面可以使用postMessage方法向父页面发送消息，通过接收消息的事件监听器在父页面中捕获消息并做出相应处理。子页面发送消息的代码示例如下： ```javascript window.parent.postMessage('Hello from child page!', '*'); ``` 在父页面中，可以通过添加消息事件监听器来接收子页面发送的消息，并进行相应的处理： ```javascript window.addEventListener('message', function(event) { if (event.origin !== '子页面的URL') return; console.log('Message received from child page: ' + event.data); }); ``` 二、window.parent属性： 子页面可以通过window.parent属性直接访问父页面的方法和属性，从而与父页面进行通信。例如，子页面可以通过以下方式调用父页面的方法： ```javascript window.parent.parentMethod(); ``` 三、通过URL参数传递信息： 子页面可以通过URL参数将需要传递的信息附加在URL后面，并在父页面中通过解析URL参数获取子页面传递的信息。子页面设置URL参数的代码示例如下： ```javascript var data = 'Hello from child page!'; var url = window.location.href + '?data=' + encodeURIComponent(data); window.location.href = url; ``` 在父页面中，可以通过解析URL参数来获取子页面传递的信息： ```javascript var urlParams = new URLSearchParams(window.location.search); var data = decodeURIComponent(urlParams.get('data')); console.log('Data received from child page: ' + data); ``` 以上是在iframe中子页面和父页面通信的一些方法，根据具体的需求，可以选择合适的方法进行通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值