iframe子页面和父页面传值js操作

最新推荐文章于 2025-05-19 11:12:17 发布

皮卡丘踢球

最新推荐文章于 2025-05-19 11:12:17 发布

阅读量5.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：随笔文章标签： iframe子页面和父页面传值js操作子页面获取父页面元素取值

本文链接：https://blog.youkuaiyun.com/feng2147685/article/details/81003708

随笔专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用jQuery实现子页面与父页面间元素值传递的例子。具体包括从子页面获取父页面元素的值及向父页面元素赋值的方法。特别注意多级页面间的层级关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var chooserRegion=$("#chooserRegion",window.parent.document).val();//子页面获取父页面元素取值

$("#chooseRegion",window.parent.document).attr("value",region);//子页面给父页面元素赋值

存在多级调用window.parent.parent......记好层级关系较重要.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皮卡丘踢球

关注关注

2
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

iframe与父页面传值(方法互调)

05-29

NULL 博文链接：https://skying007.iteye.com/blog/1044069

iframe 子页面传值给父页面

yuyu_2019的博客

06-18

1663

子页面 <body> 子级：B页面<br/> <button id="b_button">B页面发送A页面数据</button><br/> <script> document.getElementById("b_button").onclick = function(){ var param = {'name':'admin'}; window.parent.pos

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

Axure跨页面交互：利用IFrame和JS实现父子页面菜单联动

最新发布

招风的黑耳优快云

05-19

1230

在 Axure 中使用内联框架（IFrame）进行父子页面间的通信是一个非常有效的技巧，尤其是在需要实现复杂交互逻辑时。通过 JavaScript 直接操作 DOM 元素，可以突破 Axure 基础元件的限制，实现更灵活的页面联动。通过结合 Axure 的内联框架和 JavaScript 代码，你可以实现复杂的父子页面通信，提升原型的交互真实性和维护效率。这种方法不仅适用于导航菜单联动，还可扩展到表单提交、数据加载等更多场景。

JS iframe子窗口给父窗口传值

m0_61420899的博客

01-18

841

子窗口代码：第一种情况：子窗口域名和父窗口域名不同 parentHost = document.referrer;获取父窗口域名，如果同域名则不需要 window.parent.postMessage(1,parentHost); 第二种情况：传到所有的域名 window.parent.postMessage(1,*); ...

iframe 传接值 父页面 子页面传值

萝卜的专栏

03-25

1318

father.html New Document <!-- function test2() { var ifrObj=window.frames["ifr"].document; //var txt=ifrObj.getElementById

关于子框架iframe往父框架中传值

php菜鸟技术天地

06-02

825

父框架代码: index.htm type=text name="psy"> src="1.htm"> 子框架代码( 1.htm ): action="admin.asp" method="post"> name="ad" type="checkbox" value="1" id="xxx" onClick="parent.document.getElement

JS父页面与子页面相互传值方法

10-26

需要注意的是，由于同源策略的限制，只有当父页面和子页面位于同一域下，才能直接通过JS进行通信。如果跨域，需要借助其他技术如CORS、JSONP或WebSocket等来实现数据传递。此外，出于安全考虑，现代浏览器可能限制...

iframe子页面操作父页面并实现屏蔽页面弹出层效果

12-12

问题：在index.html 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？准备： index.html son.html 思路：一：index.html中iframe引入son.html ，复制代码代码...

JS中Iframe之间传值及子页面与父页面应用

10-27

- 使用 `window.parent.document` 可以访问父页面的`document`对象，这使你可以操作父页面中的任何DOM元素。 - 要获取特定元素，可以使用 `window.parent.document.getElementById('elementId')` 或其他选择器方法...

iframe父向子传值实例.rar

06-03

然而，由于浏览器的同源策略限制，`iframe`内的页面与包含它的父页面在不同源时，不能直接访问彼此的DOM或JavaScript变量，这就引出了"iframe父向子传值"的问题。在标题"iframe父向值实例.rar"和描述中提到的解决...

iframe子向父传值实例.rar

06-03

总的来说，`iframe`子向父页面传值是一个常见的需求，尤其是在处理跨域问题时。通过学习和实践这个实例，开发者不仅可以掌握一种实用的技术，还能加深对Web安全和浏览器限制的理解，提升自己的开发技能。

frame之间以及子页面和父页面间参数传递

06-30

在jsp页面中，frame之间以及子页面和父页面间参数是如何传递的？

关于使用iframe的父子页面进行简单的相互传值

12-22

763

当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？父页面是parentPage.html，子页面是childPage.html。1、情况一：父页面获取子页面传入的数据（子页面给父页面传值）2、情况二：子页面获取父页面的数据（父页面给子页面传值）关于使用iframe的父子页面进行简单的相互传值。子页面childPage.html。

iframe父页面与子页面之间的传值问题

weixin_30832983的博客

11-25

438

一、父页面给iframe中的子页面传值，把值写入子页面的文本框里 father.html <script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script> <script type="text/javascript"&g...

【Layui】子页面向父级页面传递参数

咔咔博客

01-03

6561

author：咔咔 wechat：fangkangfk 案例：底层是父级页面，上边是子页面，子页面需要将选择的ID传递给父级页面首先需要在父级页面写open打开子页面 content是子页面地址 var type_id; layui.use(['laypage', 'layer','form'], function() { var la...

使用iframe的父子页面进行简单的相互传值

time141的博客

09-02

7242

使用iframe标签嵌套页面时，通过再父页面通过接口请求的数据，如何传给子页面呢？作为一个刚刚入门的前端小白，只有边百度边写demo，研究一下iframe的父子页面的传值，如果有什么不对的地方请大家指出。 父页面：father.html,子页面:son.html 1、 ...

iframe父页面与子页面如何传值

王等等csdn的博客

12-07

9987

一.父页面向子页面传值 parent.vue <template> <iframe id="iframe" width="100%" :src="src"></iframe> </template> <script> export default { data() { return { iframe: null, src: '', //需要加载的子页面url

iframe 中子页面调用父页面的Vue方法并正确传参

热门推荐

皮一下很开心的猴头

05-15

1万+

父页面的代码 html <div id="app"> //省略业务代码x行..... <iframe src="/sonpage" > //省略业务代码x行..... </div> vue var vm = new Vue({ el:'#app', data:{ }, mounted: function () { ...

iframe父子页面间通信总结

weixin_30236595的博客

10-09

3830

随着网页结构的复杂化，页面内嵌frame越来越常见，但不管是作为内容页来显示，还是作为组件模块嵌入，都有父子页面间通信的需求可能，因此为了更好的实现需求就必须了解父子页面间的通信。 iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。同域下父子页面的通信页面间通信常以页面间调用实现，包括以下几个方面：（调用包含html ...

iframe父页面向子页面传值

08-19

在使用iframe时，父页面向子页面传值的方法如下所示：在父页面的JS代码中，可以通过postMessage函数向子页面发送消息。该函数需要两个参数，即key和value，分别表示字段名和值。首先，通过获取iframe元素，然后使用contentWindow属性获取iframe的contentWindow对象。接着，调用postMessage函数，将要传递的数据以对象的形式传入，对象的key对应字段名，value对应值。具体代码如下所示：postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, iframe.src); } }。这样，父页面就能够向子页面传递值了。 [2<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [iframe 父子页面之间传值](https://blog.youkuaiyun.com/Caocui_/article/details/122664544)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [JS父页面与子页面相互传值方法](https://download.youkuaiyun.com/download/weixin_38631738/13049741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]