iframe获取子父页面元素及JS变量问题

网页中父子页面交互技巧

原创于 2021-04-21 10:53:41 发布 · 570 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

本文介绍了网页开发中父子页面间变量及元素交互的方法。包括父页面如何访问并利用子页面修改后的变量，子页面如何获取父页面的变量以及如何在子页面中操作父页面的DOM元素。

原文地址:https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html

1,父页面访问子页面的变量：
在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面

2，子页面访问父页面变量:
parent.parentVariable, parentVariable是父页面变量

3，子页面访问父页面元素：
parent.document.getElementById(‘id’）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

导电的烧火棍

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

利用JQuery操作iframe父页面、子页面的元素和方法汇总

10-19

3. **JavaScript 在iframe子页面获取父页面元素**： ```javascript window.parent.document.getElementById('元素id') ``` 4. **JavaScript 在父页面获取iframe子页面元素**： ```javascript window.frames[...

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

11-24

在示例中，父页面定义了一个变量`hello`，在`iframe`中可以这样获取其值：`parent.hello`。这将返回变量`hello`的值，即字符串`'hello'`。下面是一个简单的实例，包含了父页面和`iframe`子页面的代码： **父页面...

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

获取iframe里面的变量

热门推荐

zhengxiangwen的专栏

10-28

1万+

var tree = document.getElementById('projectIframe').contentWindow.tree;

jQuery-JS在iframe中获取父页面的值

Quber

01-23

328

1.jQuery var parentVal=$("#hid_RID",parent.document).val(); 2.JS var parentVal=parent.document.getElementById("hid_RID").value; 注：其中的hid_RID为父页面的控件ID。...

HTML父页面调用iframe子页面中js变量和方法

程序猿开发日志【学习永无止境】

12-20

9476

获取子页面dom:$("iframe").eq(0).contents().find("selector") 调用子页面js变量和方法:$("iframe").eq(0)[0].contentWindow.method() 以jquery为例，假如子iframe为 obj = $("iframe").eq(0)现在obj为jquery对象获取子页面dom // selector为

iframe 父子页面js函数调用与变量访问

baby_it的专栏

10-27

1375

在实际开发中，我们的页面展示信息时，需要动态

父页面获取子页面iframe里的变量

夜晓星的博客

01-24

3193

<iframe id="XXX" scrolling="auto" frameborder="0" width="100%" height="570px" src="XXX"> </iframe> var 变量名称= document.getElementById('XXX').contentWindow.变量名称;

iframe子页面与父页面在同域或不同域下的js通信

10-25

在讨论iframe子页面与父页面间的JavaScript通信时，首先需要理解同域与跨域的概念。同域指的是两个页面的协议、域名和端口完全相同。跨域则是指页面的协议、域名或端口中的一个或多个不同。在同域环境下，iframe与...

JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

01-19

第一、在iframe中查找父页面元素的方法：$(‘#id’, window.parent.document) 第二、在父页面中获取iframe中的元素方法：$(this).contents().find(“#suggestBox”) 第三、在iframe中调用父页面中定义的方法和变量：...

iframe子页面与父页面间元素及js变量的访问

ldw184的专栏

04-09

6661

1、子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2、父页面访问子页面元素 document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用do

JavaScript实现IFrame子窗口调用父窗口的全局变量

12-31

JavaScript实现IFrame子窗口调用父窗口的全局变量

浏览器同源策略，及跨域解决方案

周大侠的博客

08-31

2015

一、同源策略浏览器的同源策略是一种约定，最核心也最基本的安全功能，它限制了来自不同源的 “document” 或脚本，对当前 “document” 读取或设置某些属性。这个策略是非常重要的，试想下如果没有该策略。那么 a.com 的一段 JavaScript 脚本，可以在 b.com 未导入该脚本的情况下，对 b.com 的页面进行随意更改，那就很恐怖了。为了防止页面之间发生混乱，浏览器...

Python课堂笔记-第八讲&第九讲（函数）

chris7266的博客

09-05

695

Python课堂笔记-第八讲&第九讲（函数）一、函数简介二、函数的参数1. 形参和实参2. 参数的类型3. 参数的传递方式三、函数的返回值四、文档字符串五、命名空间六、函数作用域七、递归函数总结一、函数简介函数也是一个对象函数用来保存一些可执行的代码，并且可以在需要时，对这些语句进行多次调用。 # 定义一个函数 def fn(): print('这是我的第一个函数！！！') print('哈哈哈') print('嘿嘿嘿') # print是函数对象 print()

获取iframe子页面js方法，子页面调用父页面变量

aadyf的博客

10-13

782

一、获取子页面方法 1、页面里增加iframe链接路径 <iframesrc="consult.html"frameborder="0"class="layadmin-iframe"id="J_questionzx"></iframe> 2、监听点击事件时跳转到iframe页面并执行相应的方法 $("#J_questionzx")[0].contentWindow.reScrollBottom(); 二、iframe子页面调用父页面公共变量使用parent.c...

父元素与子iframe相互获取变量和元素对象

xiebiaoling的专栏

09-13

8008

父中: var count = 1; ------------------------------------------------------------- 子iframe中: alert(window.parent.count); //获取父中的js变量 alert($("#username", window.parent.document

iframe父页面和子页面获取元素和js变量

04-26

169

父页面获取iframe页面元素和变量获取方法：$("#id")[0].contentWindow.showInfo()；获取元素:$("#id").contents().find("#suggestBox"); iframe子页面获取父页面元素变量 window.parent.showInfo(); 转载于:https://www.cnblogs.com/y...

iframe 父窗口调用子窗口的js全局变量

z110655的博客

04-11

1870

直接上代码这是子页面的一部分代码由于我要实现聊天功能，多以需要父页面调用子页面chat变量判断是否需要弹窗 <div class="container"> <header><h3 id="username">与{{username}}聊天中</h3></header> <div id="result"> ...

子页面通过Iframe获取父页面的变量与控件技巧

假设父页面中有一个JavaScript变量`parentVar`，子页面可以通过以下代码获取： ```javascript var parentVar = window.parent.parentVar; ``` 4. **操作父页面的控件** 子页面同样可以通过`window.parent`...