js/jq iframe父子页面交互

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

liuyan1106_

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

阅读量325

点赞数

分类专栏： jQuery ES5/ES6 文章标签： js jquery

本文链接：https://blog.csdn.net/liuyan1106_/article/details/109679141

版权

jQuery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ES5/ES6

4 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

一、子页面调父页面

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

分享到新浪微博

扫一扫

专栏目录

JQuery对iframe子父框架的操作

Chaya&SH的博客

11-24

2975

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

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

09-13

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

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

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

weixin_30617797的博客

07-18

297

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

Js/Jquery获取iframe中的元素在Iframe中获取父窗体的元素方法

dezmg8616的博客

09-10

262

Js/Jquery获取iframe中的元素在Iframe中获取父窗体的元素方法在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1...

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

weixin_30840253的博客

06-01

300

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

jq、js父子页面交互

冷雨温喉的博客

09-27

425

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

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

weixin_33841503的博客

11-03

245

在一个叫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交互

weixin_34409357的博客

12-22

215

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

javascript与Iframe之间通信

wen_j的博客

03-27

1730

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

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

12-02

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

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

10-21

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

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

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

【Iframe】父子页面交互

bug制造者

11-07

222

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

JQ UI 拖拽DIV插件

05-23

在网页开发中，jQuery UI（简称JQ UI）是一个基于jQuery JavaScript库的用户界面插件集，它提供了丰富的交互效果和可自定义的主题。本文将详细介绍JQ UI中的拖拽功能，以及如何实现一个兼容性高的拖拽DIV插件。 ...

iframe 跨域 js交互

fyqcdbdx的专栏

11-18

949

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

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

niemingming的专栏

06-20

1402

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

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

懒人改变世界

09-06

2428

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

《js》iframe之间跨域交互

kaige8312的博客

07-22

1471

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父子页面交互

peade的博客

09-25

359

父子页面获取对应的window对象，再通过window对象来处理 # 父页面获取子页面的window对象 window.document.querySelector('iframe').contentWindow # 子页面获取父页面的weindow对象 window.parent ...

Jquery中获取iframe的代码(window.top.parent)