同域之下子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() ...
随机推荐
- 洛谷——P1759 通天之潜水
P1759 通天之潜水 题目背景 直达通天路·小A历险记第三篇 题目描述 在猴王的帮助下,小A终于走出了这篇荒山,却发现一条波涛汹涌的河拦在了自己的面前.河面上并没有船,但好在小A有n个潜水工具. ...
- python 函数编写指南
#函数编写指南:1.给函数指定描述性名称,且只在其中是用小写字母和下划线 2.每个函数都应包含简要的阐述其功能的注释,该注释应紧跟在函数定义后面,且采用文档字符串格式 3.给形参指定默认值时,等号两边 ...
- webpack-dev-server和webpack
指导小伙伴在webstorm+nodejs环境下新建项目时,小伙伴出现了一个很神奇的问题:没有执行webpack-dev-server情况下,即使执行npm init,也不会出现package.jso ...
- c#获取文字全拼音
class Program { /// <summary> /// 获得拼音 /// </summary> /// <param name="str_Spell ...
- BZOJ 2434 Luogu P2414 [NOI2011]阿狸的打字机 (AC自动机、树状数组)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2434 题解: 我写的是离线做法,不知道有没有在线做法. 转化一波题意,\(x\)在AC ...
- BUPT2017 springtraining(15) #3
这里这里 A.签到题 #include <cstdio> double a[] = {0.4, 0.16, 0.063, 0.025, 0.010, 0.004}; int main() ...
- Python 3 条件语句
条件语句: 用于判定,判定是否符合某条件,符合则执行,不符合则不执行该条件所定义的操作. 一步判定: 用于理解不会这样使用. if 1==1: if条件判定只能出现一次. print(&q ...
- Javascript控制回车键进行表单（form）提交（转）
一.采用钩子事件去捕获 键盘事件有3个: keydown,keypress,keyup分别是按下,按着没上抬,上抬键盘 . $(document).keyup(function(event){ if( ...
- 开源GIS软件 2
Android上的导航软件 AndNav AndNav 是一款 Android 手机上的 GPS导航软件(非开源).软件支持GPS定位信息,目的地查询,道路建议管理,导航提示等功能,十分强大的一款软件 ...
- [Meteor] Meteor安装被墙问题
我的系统安装地址是这个https://static-meteor.netdna-ssl.com/packages-bootstrap/1.3.2.4/meteor-bootstrap-os.osx.x ...