js/jq iframe父子页面交互

最新推荐文章于 2022-09-27 16:35:37 发布

原创最新推荐文章于 2022-09-27 16:35:37 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery

jQuery 同时被 2 个专栏收录

4 篇文章

订阅专栏

ES5/ES6

4 篇文章

订阅专栏

本文详细介绍了如何在Web开发中实现子页面与父页面之间的交互，包括使用jQuery和原生JavaScript获取对方页面的元素及调用方法。通过iframe实现的通信方式对于前端开发者来说是实现组件间通信的重要手段。

一、子页面调父页面

1、获取父页面元素

 // jquery
 $('#objId', parent.document)
 
 // 原生js
 window.parent.document.getElementById('objId')

2、获取父页面方法

 // jquery
parent.parentFun()

二、父页面调子页面

1、获取子页面元素

 // jquery
$("#iframeId").contents().find('#objId')

// 原生js
document.getElementById('iframeId').contentWindow.document.getElementById('objId')

2、获取子页面方法

 // jquery
$('#iframeId')[0].contentWindow.childrenFun()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liuyan1106_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iframe父页面与子页面通信及相互调用方法

09-13

本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法（含JS、JQuery方法）

使用jquery/js获取iframe父子级、同级获取元素的方法

12-02

在Web开发中，`iframe`（Inline Frame）是一种常见的页面嵌入技术，它允许在一个HTML文档中嵌入另一个HTML文档。然而，当涉及到跨域安全和不同上下文间的交互时，如何正确地获取和操作`iframe`内的元素或从`iframe`...

参与评论您还未登录，请先登录后发表或查看评论

js控制Iframe 和 iframe与主页的交互，传值 (转载)

weixin_30840253的博客

06-01

358

HTML框架IFrame下利用JS在主页面和子页面间传值今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料下面主页面和子页面互相传值的DEMO如果仅仅需要子页面触发主页面的函数仅需[parent.window.你的函数]就可以了DOM方法：父窗口操作IFRAME：window.frames["iframeSon"].documentIFRAME操作父窗口:wi...

JQuery javascript实现父子页面相互调用

weixin_30617797的博客

07-18

336

javascript实现父子页面相互调用 By:授客 QQ：1033553122 场景1 父页面调用子页面如上图，在iframe子页面的<script>元素中，定义了taskStatus全局变量，如果希望在其父页面中获取该全局变量的值，则可在父页面的<script>元素中新增js脚本如下： var taskStatus = document...

jq、js父子页面交互

冷雨温喉的博客

09-27

476

js: window.parent.document.getElementById('父元素id名')jq: $('#父元素id名'， parent.document)1. 父页面获取子页面元素。2. 父页面调用子页面方法。3.子页面获取父页面元素。4.子页面获取父页面方法。

iframe框架之间js方法相互调用及数据传递

weixin_33841503的博客

11-03

286

在一个叫top.html的页面定义两个iframe和两个方法 <iframe id="gg" name="gg" src="gg.html" width="500" height="200"></iframe> <iframe id="dd" name="dd" src="dd.

使用jQuery实现iframe父子页面交互示例

- **标签简述**：标签“iframe”和“jq”分别指的是iframe元素和jQuery库，它们是实现跨页面交互的关键技术。 - **jQuery 与 iframe 结合使用**：标签暗示了在实现父页面与子页面交互功能时，jQuery库被用来简化操作...

Jquery调用iframe父页面中的元素及方法

10-21

这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而，对于跨域的问题，需要通过其他技术手段（如postMessage API）来解决。文章的总结部分提醒我们，虽然这里介绍的技术在同源情况下非常有用...

利用jQuery实现新浪网易评论区的iframe编辑与交互

5. **父子窗口通信**：利用`window.opener`属性，允许iframe内的内容与父窗口进行通信，例如执行特定的函数`window.opener.XXX(xxx)`，这可能是用于更新评论状态或者同步数据。 6. **HTML结构与样式**：代码中包含...

使用JQuery与iframe交互

weixin_34409357的博客

12-22

245

在iframe中查找父页面元素的方法： $('#id', window.parent.document) 在父页面中获取iframe中的元素方法： $(this).contents().find("#suggestBox") 在iframe中调用父页面中定义的方法和变量： parent.method parent.value ...

js 实现iframe 之间传值

07-12

js 实现iframe 之间传值

js iframe 方法及元素相互调用

03-08

js iframe 方法及元素相互调用 js调用iframe方法

javascript与Iframe之间通信

wen_j的博客

03-27

1859

一、同域（同一域名，同一端口，同一协议）下进行 1.iframe子页面和父页面相互获取元素 1.1子页面获取父页面元素 JS原生：window.parent.document.getElementById(‘元素id’) Jquery：$("#id",parent.document) 1.2父页面获取子页面元素 JS原生：window.frames[iframe序号].document.getEl...

iframe 跨域 js交互

fyqcdbdx的专栏

11-18

1003

主要利用document.domain，在有iframe的页面head写上： document.domain='xxx.com' 在iframe目标页面也写上： document.domain='xxx.com' 这样，两个页面的js就可以交互了，但要注意一个问题，在IE678下，有时获取location.href时有异常，保险起见使用loc

《js》iframe之间跨域交互

kaige8312的博客

07-22

1618

1.父页面调用子页面直接通过iframe的url?param=abc 方式,把值传到子页面. https://www.cnblogs.com/sydeveloper/p/3712863.html 2.子页面调用父页面通过parent https://blog.youkuaiyun.com/u012374381/article/details/79578311 3. window.po...

JQuery对iframe子父框架的操作

Chaya&SH的博客

11-24

3041

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传 LaTex数学公式 UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

【Iframe】父子页面交互

bug制造者

11-07

261

参考文章：https://blog.youkuaiyun.com/lihefei_coder/article/details/78635558 父页面获取子页面的window对象 //原生JS获取方式： var frameWin = document.getElementById("ifr").contentWindow; 或 var frameWin = document.getElementsByTagName('iframe')[0].contentWindow; 或 var frameWin = documen

js中几种父子窗口的交互总结

niemingming的专栏

06-20

1458

最近再做项目中，经常需要在页面的父子页面之间进行数据的交互和方法的调用，在这里做些简单的总结以备不时之需。页面几种方式： 1.采用open方法打开的新页面和原页面的交互：采用这种方式，可以在子页面中调用opener属性获取父级打开页面。原则上将该方法返回一个新打开的窗体对象，这时需要注意的是如果打开的窗体路径和父级窗体所处的域不同的话，是不能操作子窗体数据

在Iframe页面中使用jQuery控制parent页面

懒人改变世界

09-06

2482

1、控制parent页面跳转，这个其实用不到jQuerywindow.parent.location.href = "*****";2、调用parent页面的函数，其实也不用jQuerywindow.parent.method(para);3、操作parent的DOM$(".test", window.parent.document).remove();