html中iframe子页面与父页面元素的访问以及js变量的访问

最新推荐文章于 2022-01-21 09:47:54 发布
最新推荐文章于 2022-01-21 09:47:54 发布 · 190 阅读 · 0

本文深入探讨了Web开发中子页面与父页面之间的元素访问、JS变量交互及跨域通信策略，包括如何利用document相关方法进行元素操作、通过设置全局变量实现JS变量的共享，以及解决跨域限制的技术手段。

1、子页面访问父页面元素

parent.document.getElementById('id')和document相关的方法都可以这样用

2、父页面访问子页面元素

document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法

3、子页面访问父页面js变量（注：父页面的js变量需为全局变量）

子页面var variable = parent.variableParent (variableParent为父页面定义的变量)

4、父页面访问子页面js变量

这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面

以上仅代表个人观点，欢迎大家纠错

iteye_3224
关注
JavaScript实现IFrame子窗口调用父窗口的全局变量
12-31
JavaScript实现IFrame子窗口调用父窗口的全局变量
Iframe获取父页面的变量和控件
05-31
子页面获取父页面的方法，变量，标签等子页面获取父页面的方法，变量，标签等
iframe 父页面和子页面方法相互调用
qq_14895863的博客
08-22 216
<!DOCTYPE html> <html> <head> <title>parent</title> <meta charset="UTF-8"> </head> <body> <script language="javascri
父页面和iframe子页面变量的交互
z1340954953
07-05 2554
父页面和iframe子页面交互变量和元素
iframe父子页面互相调用方法、获取变量、获取元素
lixiaonaaa的博客
12-22 4281
每次iframe父子页面交互的时候总是现查，总也记不住，所以今天来详细记载一下。以下均为jquery 写法。 1、iframe子页面调用父页面 （1）方法 parent.func() （2）变量 parent.value （3）jquery元素 $("div",parent.document) 2、父页面调用iframe子页面 （1）方法 $("#childrenIframeId").eq(0)[0].contentWindow.func(); （2）变量 $("#ch
利用JQuery操作iframe父页面、子页面的元素和方法汇总
10-19
3. **JavaScript 在iframe子页面获取父页面元素**： ```javascript window.parent.document.getElementById('元素id') ``` 4. **JavaScript 在父页面获取iframe子页面元素**： ```javascript window.frames[...
Jquery调用iframe父页面中的元素及方法
11-24
在这个实例中，子页面的JavaScript代码会在页面加载完成后运行，它会找到父页面中的`default`元素并显示其HTML内容，调用`getHelloWorld`函数弹出提示框，以及显示`hello`变量的值。 总结来说，jQuery提供了方便的...
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
10-26
1. **在`iframe`中查找父页面元素**： 要在`iframe`中找到并操作父页面的元素，我们可以使用`jQuery`的选择器，但需要指定正确的上下文。例如，要查找父页面ID为`default`的元素，可以使用以下代码： ```...
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
10-26
通过这种方式，iframe内的JavaScript代码可以访问父页面中定义的方法和变量。 #### 知识点四：使用jQuery在iframe中获取父页面的body元素 - 要在iframe中使用jQuery获取父页面的body元素，可以使用如下代码：`var c...
iframe子页面与父页面元素的访问以及js变量的访问
赶路人儿
11-30 5263
1、子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2、父页面访问子页面元素  document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法...
父元素与子iframe相互获取变量和元素对象
xiebiaoling的专栏
09-13 8008
父中:    var count = 1; ------------------------------------------------------------- 子iframe中:    alert(window.parent.count); //获取父中的js变量    alert($("#username", window.parent.document
HTML父窗口与IFRAME中变量互访
hongweigg的专栏
04-10 1904
1、HTML父窗口访问IFRAME中变量或函数 在父窗口脚本中写： //调用变量赋值 IframeObj.contentWindow.someVar = "test is ok"; //调用函数 IframeObj.contentWindow.someFunction(); 2、HTML中IFRAME访问父窗口中变量或函数 假设在父窗口脚本中具有方法： functi
iframe访问父页面的变量、方法
寂寥人生
01-21 767
https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html
父页面获取 子页面iframe里的变量
夜晓星的博客
01-24 3192
<iframe id="XXX" scrolling="auto" frameborder="0" width="100%" height="570px" src="XXX"> </iframe>    var 变量名称= document.getElementById('XXX').contentWindow.变量名称;
iframe父页面与子页面之间的元素获取与方法调用
热门推荐
ChenXJ
11-15 2万+
父页面与子页面之间的元素获取与方法调用： 1、JS 父调子 子调父 元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById("父页面元素ID"); ②window.parent.document.getElementsByTagName(
html iframe 子页面调用父页面的方法
xuanmu
02-16 409
父页面代码： <!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="javascript" type="text/ja...
iframe父页面与子页面赋值
weixin_30568715的博客
09-12 823
最近因为公司之前的系统用iframe，里面的高度不能自适应，导致了很多问题，今天特意拿来研究一下，从网上找了一些方法试验了一下，这里记录一下成功的方法 1、父页面获取子页面的高度，并给父页面赋值 父页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
iframe 父窗口调用子窗口的js全局变量
z110655的博客
04-11 1862
直接上代码 这是子页面的一部分代码由于我要实现聊天功能，多以需要父页面调用子页面chat变量判断是否需要弹窗 <div class="container"> <header><h3 id="username">与{{username}}聊天中</h3></header> <div id="result"> ...
JavaScript IFrame通信：子窗口访问父窗口全局变量与方法
"这篇文章主要介绍了如何在JavaScript中实现在IFrame子窗口中调用父窗口的全局变量和方法。" 在Web开发中，IFrame（Inline Frame）是一种嵌入式对象，常用于在一个HTML页面中加载另一个HTML页面。在处理跨窗口交互...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值