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

最新推荐文章于 2021-12-22 09:34:16 发布
转载 最新推荐文章于 2021-12-22 09:34:16 发布 · 5.7w 阅读 · 1
收录于
Web技术

当前文章被收录于：

Web技术
9 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了网页开发中父子页面间交互的基本方法，包括子页面访问父页面元素、父页面访问子页面元素、子页面访问父页面JS变量及父页面访问子页面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变量
 
这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面
 
标签
#js #html
Tartancalib标定OAK-FFC_4p（上）
qq_51731421的博客
07-23 1246
1.使用Tartancalib标定双目或多目相机前，先对单个相机标定获得内参，再获得外参。
JavaScript实现IFrame子窗口调用父窗口的全局变量
12-31
JavaScript实现IFrame子窗口调用父窗口的全局变量
html中 子页面如何访问父页面的对象
b_bunana的博客
06-27 759
假设父页面有个<div id="father"></div> 在子页面写$("#father",parent.document)就可以获取div id为father的父对象 $("#father",parent.document).empt()清空div id为father下的所有内容。 parent.location.reload() 重新加载父页面 在父页面 获取if...
基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）
基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。该项目可以直接作为毕设、期末大作业使用，代码都在里面，系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值，项目都经过严格调试，确保可以运行！基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检测和语义分割数据集）基于SAM的半自动图像标注工具（可制作目标检
HTML 父页面与子页面传值调用问题
u012972294的博客
06-04 1163
HTML 父页面与子页面传值调用问题 场景：父页面为第一级栏目的列表展示数据，子页面为父页面对应栏目页下面的详细数据，用户通过点击父页面每一行的“查看详细”按钮触发弹窗， 弹窗进行数据展示，弹窗效果用的layer.open，子页面为一个单独的detail页面，所以父子页面需要传递唯一值来进行数据展示， 目前采用的方法是 在父页面定义一个div 或者 span(举例id="name") ，然后给其赋值，然后再子页面 通过window.parent.$("name").val()这个方法取到这个..
iframe父子页面互相调用方法、获取变量、获取元素
lixiaonaaa的博客
12-22 4378
每次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
浏览器同源策略，及跨域解决方案
周大侠的博客
08-31 2072
一、同源策略 浏览器的同源策略是一种约定，最核心也最基本的安全功能，它限制了来自不同源的 “document” 或脚本，对当前 “document” 读取或设置某些属性。 这个策略是非常重要的，试想下如果没有该策略。那么 a.com 的一段 JavaScript 脚本，可以在 b.com 未导入该脚本的情况下，对 b.com 的页面 进行随意更改，那就很恐怖了。为了防止页面之间发生混乱，浏览器...
Iframe父页面与子页面之间的相互调用
weixin_39037804的博客
10-10 129
父页面： <!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <bo...
iframe使用的一些总结
pan396365044的博客
09-11 212
iframe子页面与父页面元素的访问以及js变量的访问 参考链接：https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html / https://zhidao.baidu.com/question/1759940378751684988.html iframe里子页面访问父页面元素parent.document.getElementBy...
html iframe 子页面调用父页面的方法
小小的熊的博客
05-08 1314
还是附上代码吧。不多说，方便日后查看 父页面代码： <!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="jav...
iframe子页面和父页面如何传值通信
热门推荐
znbb_的博客
07-08 1万+
业务场景，在index.html的主页面中，我们希望嵌套子页面，这时候就涉及到父子页面的通信问题。 以下的都是在同域的基础上的： 1.相互获取dom元素 1.1 在父页面获取子页面的dom元素： document.getElementById('iframe_id).contentWindow.document.getElementById('domId'); //先获取ifr...
JQueryiframe页面操作父页面中的元素与方法
04-24 2139
1）在iframe中查找父页面元素的方法： $('#id', window.parent.document) 2）在iframe中调用父页面中定义的方法和变量： parent.method parent.value 3）实例 1.父页面 [html] view plaincopy %@ Page Language="C#"
用jQuery获取父页面元素及子页面元素的方法和变量
A_hunteranimal的博客
01-14 1643
子页面元素是通过父页面的iframe进来的,所以在子页面元素需要获取父页面的元素做一些改变。 jquery就为我们提供了一个很好的方法 : 第一、在iframe中查找父页面元素的方法： $(’#父页面元素id’, window.parent.document)； $('#tmenu',window.parent.document).append("<li class='tmenuli'&g...
JQuery iframe页面操作父页面中的元素与方法(实例讲解)
qq_28444079的博客
10-27 400
在iframe中查找父页面元素的方法：$('#id', window.parent.document) 在iframe中调用父页面中定义的方法和变量：parent.method parent.value 父页面<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo.
html iframe 子页面调用父页面的方法、变量、内容
chuxuan0215的博客
07-02 2174
父页面代码： <!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="javascript" type="text/...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值