同域之下子iframe的DOM控制问题
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控制问题的更多相关文章
- JavaScript对iframe的DOM操作
在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...
- iframe的Dom操作
我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(ifram ...
- JS跨域：jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- DOM（七）使用DOM控制表格
表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = docu ...
- 转：ie6与firefox操作iframe中DOM节点的一点不同
依次在两个浏览器中运行以下代码 <html> <body> <iframe id="myiframe"></iframe> < ...
- 轻松绕过极域电子教室、和教师控制 Say GoodBye
注意:以下博文(包括但不限于汉字.英文.阿拉伯数字 .图片.影像,以及前述之各种任意组合等等)均为随意敲击键盘所出,用于检验本人电脑键盘录入.屏幕显示的机械.光电性能,并不代表本人观点.如需要详查请直 ...
- iframe子页面控制父页面滚动高度，直接蹦到父页面开头
zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...
- js 跨域 Jquery取得iframe中元素的几种方法
http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...
- dom控制
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement_x_x() //创建一个具体的元素 createTextNode() ...
随机推荐
- 通过git向github提交项目
按顺序学习 https://www.cnblogs.com/forget406/p/6045499.html#top https://blog.csdn.net/xiaoputao0903/artic ...
- net core 配置Redis Cache
参考文章地址:https://dotnetcoretutorials.com/2017/01/06/using-redis-cache-net-core/ 具体步骤: 1 Install-Pack ...
- 对vuex的浅解
vuex是什么? 官网的解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也 ...
- JSON中getInt()和optInt()的区别
最近在用org.json这个包解析json的时候,发现谷歌提供两种不同的数据类型获取方法,比如说针对Int类型,提供了getInt()和optInt()两种方式,谷歌文档中的说明如下: 那么这两者有什 ...
- 清北学堂模拟赛d2t4 最大值(max)
题目描述LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目:这里有一个长度为n的正整数数列ai(下标为1~n).并且有一个参数k.你需要找两个正整数x,y,使得x+k<=y, ...
- Hibernate二级缓存的使用
1.什么是缓存? 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器,其作用是为了减少应用程序对物理数据源访问的次数,从而提高了应用程序的运行性能.Hibernate在 ...
- Linq查询datatable的记录集合
通过linq查询datatable数据集合满足条件的数据集 1.首先定义查询字段的变量,比方深度 string strDepth=查询深度的值: var dataRows = from datarow ...
- Window下UDP（socket）接和收数据案例
配置QT的环境变量,这台电脑à属性à高级系统设置à高级à环境变量à系统变量àpathàC:\Qt\Qt5.3.0\5.3\mingw482_32\bin;C:\Qt\Qt5.3.0\Tools\ ...
- String字符串方法具体解释
Java开发中,基本都会用户String,有些时候忘记了它还有某一个方法,或者曾经没有使用到.而这些方法可能会节约非常多时间.自己为了学习这些方法,决定对部分測试一下. 定义:String=" ...
- iOS学习（3）
4. 这个写法会出什么问题: @property (copy) NSMutableArray *array; 两个问题:1.加入,删除,改动数组内的元素的时候,程序会由于找不到相应的方法而崩溃.由于 ...