new_file.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="js/jquery-2.1.1.min.js"></script>

	</head>

	<style>

		iframe{

			border: 1px solid red;

		}

	</style>

	<body>

		<div id="father">父级的内容(点击导致子iframe的字体变蓝)</div>

		<iframe src="new_file2.html" id="myFrame" frameborder="0" width="200px" height="200px"></iframe>

		<div>点击iframe里面的标签触发父级的事件。</div>

		<div>点击父级的标签，触发iframe里的事件。</div>

		<script>

			$('#myFrame').on('load',function(event){

				$('#son',this.contentDocument).click(function(){

					alert('子级调父级');

					$('#father').css('color','red');

				})

			})

			$('#father').click(function(){

				alert('开始调子级');

				var son = document.getElementById('myFrame').contentWindow.document.getElementById('son');

				son.style.color='blue';

			})

		</script>

	</body>

</html>

new_file2.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<div id="son">子iframe的内容(点击导致父级字体变红)</div>

	</body>

</html>

　　说明：

1：为iframe中的某标签绑定事件，控制iframe之外的标签。

2：为父级body中的标签绑定事件，控制iframe之中的某标签。

同域之下子iframe的DOM控制问题的更多相关文章

  1. JavaScript对iframe的DOM操作

    在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...

  2. iframe的Dom操作

    我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(ifram ...

  3. JS跨域：jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  4. DOM（七）使用DOM控制表格

    表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = docu ...

  5. 转：ie6与firefox操作iframe中DOM节点的一点不同

    依次在两个浏览器中运行以下代码 <html> <body> <iframe id="myiframe"></iframe> < ...

  6. 轻松绕过极域电子教室、和教师控制 Say GoodBye

    注意:以下博文(包括但不限于汉字.英文.阿拉伯数字 .图片.影像,以及前述之各种任意组合等等)均为随意敲击键盘所出,用于检验本人电脑键盘录入.屏幕显示的机械.光电性能,并不代表本人观点.如需要详查请直 ...

  7. iframe子页面控制父页面滚动高度，直接蹦到父页面开头

    zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...

  8. js 跨域 Jquery取得iframe中元素的几种方法

    http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...

  9. dom控制

    (1)创建新节点 createDocumentFragment()    //创建一个DOM片段 createElement_x_x()   //创建一个具体的元素 createTextNode()  ...

随机推荐

  1. ES6学习历程(变量的解构赋值)

    一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1;  b:2;  c:3; let [x, , y] = [1, 2, 3];  x:1   y ...

  2. 18清明校内测试T3

    扫雷(mine) Time Limit:1000ms   Memory Limit:128MB 题目描述 rsy最近沉迷于一款叫扫雷的游戏. 这个游戏是这样的.一开始网格上有n*m个位置,其中有一些位 ...

  3. Codeforces 939D - Love Rescue

    传送门:http://codeforces.com/contest/939/problem/D 本题是一个数据结构问题——并查集(Disjoint Set). 给出两个长度相同,且仅由小写字母组成的字 ...

  4. wx微信小程序

    俩三行时: ==========

  5. 基于Python3.7和opencv的人脸识别（含数据收集，模型训练）

    前言 第一次写博客,有点紧张和兴奋.废话不多说,直接进入正题.如果你渴望使你的电脑能够进行人脸识别:如果你不想了解什么c++.底层算法:如果你也不想买什么树莓派,安装什么几个G的opencv:如果你和 ...

  6. [POJ1733]Parity game（并查集 + 离散化）

    传送门 题意:有一个长度已知的01串,给出[l,r]这个区间中的1是奇数个还是偶数个,给出一系列语句问前几个是正确的 思路:如果我们知道[1,2][3,4][5,6]区间的信息,我们可以求出[1,6] ...

  7. Solr插件的弊端

    在前文<Solr Update插件自定义条件索引>中,我介绍了如何通过插件的模式,自定义Solr的Update过程.但是在大半年的使用过程中,发现这种方式存在如下弊端. 1.环境难以维护. ...

  8. Spring MVC-视图解析器（View Resolverr）-内部资源视图解析器（Internal Resource View Resolver）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_internalresourceviewresolver.htm 说明:示例基于S ...

  9. Codeforces Round #388 (Div. 2) C. Voting

    题意:有n个人,每个人要么是属于D派要么就是R派的.从编号1开始按顺序,每个人都有一次机会可以剔除其他任何一个人(被剔除的人就不在序列中也就失去了剔除其他人的机会了):当轮完一遍后就再次从头从仅存的人 ...

  10. mysql中 show table status 获取表信息

    用法 mysql>show table status; mysql>show table status like 'esf_seller_history'\G; mysql>show ...