同域之下子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() ...
随机推荐
- The Forth Week
1.复制/etc/skel目录为/home/tuser1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. cp -r /etc/skell /home/tuser1 ; ...
- 美团 CodeM 复赛」城市网络
美团 CodeM 复赛」城市网络 内存限制:64 MiB时间限制:500 ms标准输入输出 题目描述 有一个树状的城市网络(即 nnn 个城市由 n−1n-1n−1 条道路连接的连通图),首都为 11 ...
- [国家集训队2012]JZPFAR
[国家集训队2012]JZPFAR 题目 平面上有n个点.现在有m次询问,每次给定一个点(px, py)和一个整数k,输出n个点中离(px, py)的距离第k大的点的标号.如果有两个(或多个)点距离( ...
- hdu 3605 最大流sap+二进制思想（啊啊）
/*因为n非常大如果正常建边的话会超内存,每种状态的数目共2--10种状状体记录起来,源点与状态建边权值为状态数,状态与星球建边,星球与汇点建边*/ #include<stdio.h> # ...
- DSP广告系统架构及关键技术解析(转)
广告和网络游戏是互联网企业主要的盈利模式 广告是广告主通过媒体以尽可能低成本的方式与用户达成接触的商业行为.也就是说按照某种市场意图接触相应人群,影响其中潜在用户,使其选择广告主产品的几率增加,或对广 ...
- 20180629利用powerdesigner生成数据字典
原创作品,如有错误,请批评指正 第一步新建一个PDM模型 第二步 点击“FILE”--->"RESERVER ENGINEER"--->"DATABASE&q ...
- HDU 4543
这道题感觉很坑..不过,注意一些小问题. 参考http://www.cnblogs.com/Lattexiaoyu/archive/2013/03/31/2992553.html改进了原来自己的复杂度 ...
- LinkedList,ArrayList末尾插入谁效率高？
废话不多说,原因不解释.上測试代码: package com.letv.cloud.cdn.jtest; import java.io.IOException; import java.util.Ar ...
- 幻世（OurDream）TM 2D图形引擎开通捐赠渠道
为了支持幻世(OurDream)TM 2D图形引擎更好的发展,同一时候也是为了给希望支持引擎发展的朋友一个安全快捷的渠道,Lizcst Software Lab于今日正式在官方旗舰店增设了一个捐赠捐款 ...
- 配置Java连接池的两种方式：tomcat方式以及spring方式
1. tomcat方式:在context.xml配置连接池,然后在web.xml中写配置代码(也能够在server.xml文件里配置连接池).这两种方法的差别是:在tomcat6版本号及以上中cont ...