原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法


Posted in Javascript onAugust 05, 2016

用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下:

1、父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>demo主页面</title>
	<script type="text/javascript">
	window.onload = function(){
		var _iframe = document.getElementById('iframeId').contentWindow;
		var _div =_iframe.document.getElementById('objId');
		_div.style.backgroundColor = '#ccc';
	}
	
	</script>
</head>

<body>

<div id='parDiv'>父页面</div>
<iframe src="demo-iframe.html" id="iframeId" height="150" width="150"></iframe> 
</body>
</html>

2、子页面(demo-iframe.html),在子页面修改父页面div的字体颜色为红色,原来为黑色:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>子页面demo13-iframe.html</title>
	<script type="text/javascript">
	window.onload = function(){
		var _iframe = window.parent;
		var _div =_iframe.document.getElementById('parDiv');
		_div.style.color = 'red';
	}
	</script>
</head>

<body>
	<div id='objId' style='width:100px;height:100px;background-color:red;'>子页面</div>
</body>
</html>

3、效果图:

(1)没有加入js时的效果图:

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

(2)加入js后的效果图:

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

以上这篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mac地址验证的javascript代码
Nov 09 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 #Javascript
js从外部获取图片的实现方法
Aug 05 #Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 #Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 #Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 #Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 #Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 #Javascript
You might like
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
Python六大开源框架对比
2015/10/19 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
django ajax发送post请求的两种方法
2020/01/05 Python
keras 多gpu并行运行案例
2020/06/10 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
策划助理岗位职责
2013/11/18 职场文书
和平主题的演讲稿
2014/01/12 职场文书
上班旷工检讨书
2015/08/15 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python基础之数据类型知识汇总
2021/05/18 Python
Golang 实现WebSockets
2022/04/24 Golang