原生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 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
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
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP strripos函数用法总结
2019/02/11 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
flask中的wtforms使用方法
2018/07/21 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python交互模式基础知识点学习
2020/06/18 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
祖国在我心中演讲稿400字
2014/05/04 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
同学聚会感言一句话
2015/07/30 职场文书