js，iframe.父子页面通信

最新推荐文章于 2024-04-28 19:21:12 发布
最新推荐文章于 2024-04-28 19:21:12 发布
阅读量397 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bof_jangle/article/details/81335695
版权

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

 

其中FrameName为iframe的name。  childMethod();为定义在iframe页面中的js方法。

parentMethod();为定义在iframe的上级窗口的方法。子页面通过parent.window获取上级页面的window对象。

 

 

参考文献：https://www.cnblogs.com/sydeveloper/p/3712863.html

博风
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe 框架 父页面与子界面之间的变量、函数、元素获取
dljm328963024的博客
03-25 464
1、获取页面上的iframe 　　1-1、 document.getElementById('iframeId')； 　　1-2、 window.frames[0]、window.frames['frameName']、frames['frameName']、frames[0]、self.frames[0]，此处self与window等价，相当于本页面的window对象。 　　1-...
javascript与Iframe之间通信
wen_j的博客
03-27 1631
一、同域（同一域名，同一端口，同一协议）下进行 1.iframe子页面和父页面相互获取元素 1.1子页面获取父页面元素 JS原生：window.parent.document.getElementById(‘元素id’) Jquery：$("#id",parent.document) 1.2父页面获取子页面元素 JS原生：window.frames[iframe序号].document.getEl...
iframe父子页面通信
最新发布
大雾起了清晨
04-28 526
目录 一、 创建父页面和子页面父页面（parent.html）：子页面（child.html）：二、 实现父子页面之间的通信在父页面的 标签中：在子页面的 标签中：三、扩展：postMessage() 方法的语法：首先，我们需要创建一个包含 iframe 的父页面和一个子页面，在父页面中嵌套子页面并实现它们之间的通信。 子页面（child.html）： 二、 实现父子页面之间的通信 在父页面和子页面中，我们可以通过 postMessage 方法来实现跨域通信。以下是一个简单的例子： 在
js之iframe子页面与父页面通信
05-07 570
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。 一、同域下父子页面的通信 父页面parent.html <html> <head> <script type="text/javascript"> function say(){ aler...
记录iframe获取父、子窗口的元素和方法
Hiqingtian的博客
05-16 480
子页面获取父页面的id=care的子页面parent.care.location.reload();父页面获取id=imp的子页面imp.location.reload();1. jquery在iframe子页面获取父页面元素和方法代码如下:parent.$("selector");parent.method(); 2. jquery在父页面获取iframe子页面的元素和方法代码如下:iframe...
《js》iframe之间跨域交互
kaige8312的博客
07-22 1332
1.父页面调用子页面 直接通过iframe的url?param=abc 方式,把值传到子页面. https://www.cnblogs.com/sydeveloper/p/3712863.html 2.子页面调用父页面 通过parent https://blog.csdn.net/u012374381/article/details/79578311 3. window.po...
如何实现iframe父子传参通信
10-15
`iframe`的父子通信可以让我们实现不同页面间的交互，无论是同源策略下的非跨域通信，还是需要应对跨域场景。下面我们将详细介绍这两种情况下的实现方式。 ### 非跨域通信 #### 父调子 在非跨域情况下，父页面...
嵌入式iframe子页面与父页面js通信的方法
10-24
在网页开发中，有时我们需要在嵌入的iframe子页面与包含它的父页面之间进行JavaScript通信。这通常是出于功能集成或者数据交互的需求。本篇文章将详细阐述如何在同域和跨域的情况下实现这样的通信。 首先，我们来看...
javascript父子页面通讯实例详解
10-23
JavaScript 父子页面通信是一种常见的网页开发技术，它允许两个不同或相同的页面（一个包含在另一个内，形成父子关系）之间交换数据和调用彼此的功能。这种通信方式在单页应用（SPA）和框架嵌套等场景中非常有用。...
iframe父页面与子页面通信及相互调用方法
09-13
本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法（含JS、JQuery方法）
js中iframe通过postMessage进行通信
ingenuou_的博客
04-11 158
js中iframe通过postMessage进行通信
当window.parent.fun();子页面调用父页面方法不起作用时
liona_koukou的博客
12-21 9550
当window.parent.fun();子页面调用父页面方法不起作用时 请果断试一下top.window.parent.fun(); 有时间想仔细整理一下父子页面的传值和调用function的方法_(:зゝ∠)_
Js中的window.parent ,window.top,window.self 详解
热门推荐
Mr. David 专栏
12-01 10万+
在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。window.self功能：是对当前窗口自身的引用。它和window属性是等价的。语法：window.self注：window、self、window.self是等价的。window.top功能：返回顶层窗口，即浏览器窗口。语法：window.top注：如果窗口本身就是顶层窗口，top属
Vue iframe父子通信
sunbaoc
03-09 581
vue 组件嵌入iframe <!-- vue template--> <div> <iframe src="http://localhost:8081/" ref="iframe" frameborder="0"></iframe> </div> mounted() { window.addEventListener("message", (e) => { const data = e.data; co.
iframe之父子页面通信
yiyueqinghui的博客
08-05 7807
1、获取 子页面 的 window 对象 获取 子页面 的 window 对象 ，即获取了子页面的所有变量和方法，获取方法如下： // iframe id document.getElementById('menuIframe').contentWindow // iframe name window.frames['menuIframe'].window // iframe index 当前窗体的第几个 iframe window.frames[1].window 2、子 iframe 获取 父
iframe父页面与子页面之间的元素获取与方法调用
ChenXJ
11-15 2万+
父页面与子页面之间的元素获取与方法调用： 1、JS 父调子 子调父 元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById("父页面元素ID"); ②window.parent.document.getElementsByTagName(
vue子组件使用父组件的methods
名人卷耶
11-20 611
1、子组件通过 this.$parent.event 调用父组件方法 父组件： <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child },
1.（前端技术篇js）iframe通讯（postMessage）
地图之家
06-21 272
解决问题：用iframe嵌套页面如何进行通讯？ 效果图如下 发送信息的页面示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Historic Topographic Maps</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-s
iframe 父子页面通信
06-10
在父页面中，可以通过 `window.frames` 属性获取到子页面的引用，然后调用子页面的方法或者属性来实现通信。而在子页面中，可以通过 `window.parent` 属性获取到父页面的引用，然后调用父页面的方法或者属性来实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值