iframe是在页面中嵌套的子页，当前页面（这里称为父页）和嵌套页面（这里称为子页）可以相互控制：


当父页控制子页用contentWindow，用法为 对象.contentWindow.document.XX  或用contentDocument.XX 来操作


子页控制父页用window.parent.document.XX   如果是多层嵌套想直接操纵祖先页面就用 window.top.document.XX  


  


<!DOCTYPE HTML>

<html>

<head>

    <title>HTML5实现拖拽操作</title>

    <meta charset="utf-8"/>

    <style>

    </style>

    <script>

    window.onload=function(){

        var oinput=document.getElementById('input1');

        var oif=document.getElementById('f1');

        oinput.onclick=function(){

            //alert(oif.contentWindow.document.getElementById('d1'));

            //contentWindow全部浏览器都支持

            //contentDocument   浏览器IE6，IE7不支持

            oif.contentDocument.getElementById('d1').style.color='red';

            //oif.contentWindow.document.getElementById('d1').style.color='red';

        };

    }

    </script>

</head>

<body>

    <input type='button' value='点我' id='input1'/>

    <iframe src='iframe1.html' id='f1'> </iframe>

    <div id='d1'>通过子更改我的背景色 </div>

</body>

</html>


   本实例牵扯到父页和多个子页，多重嵌套，要用到多个页面的多篇代码，原理很好理解，但要精确表达出却很困难，其核心知识就是开头介绍的几个方法。总之今天学的东西很多很杂，代码多次更改没有合理保存，以后不急不躁，一步一个脚印。


补充：禁止别人以iframe加载你的页面




if (window.location != window.parent.location) window.parent.location = window.location;


												


											
操作iframe的更多相关文章
	

    
						
  1. js学习笔记：操作iframe
		
    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
    
		
    2. 
						
  2. 原生js与jquery操作iframe
		
    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
    
		
    3. 
						
  3. Jquery 操作IFrame
		
    使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id ...
    
		
    4. 
						
  4. jquery 操作iframe的几种方法总结
		
    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
    
		
    5. 
						
  5. jquery操作iframe中的js函数
		
    关键字:jquery操作iframe中的js函数 1.jquery操作iframe中的元素(2种方式) var tha = $(window.frames["core_content&quo ...
    
		
    6. 
						
  6. [置顶] js操作iframe兼容各种浏览器
		
    在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
    
		
    7. 
						
  7. jquery ：操作iframe
		
    原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...
    
		
    8. 
						
  8. js操作iframe总结
		
    一 在父页面操作子页面   IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...
    
		
    9. 
						
  9. JS中获取和操作iframe
		
    一.需求与遇到的问题 在网站的后台管理中使用了iframe框架布局,包括顶部菜单.左侧导航和主页面.需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统. 我的思路是:在 ...
    
		
    10. 
						
  10. JQuery操作iframe父页面与子页面的元素与方法
		
    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. AX ERP 真正的自动批处理
			
    AX real batch job- AX ERP 真正的批处理 在AX3标准功能中,自动化任务是利用Batch来进行自动化处理任务,标准功能的局限是无法真正做到无人值守.比如服务器重启,必须手动去开 ...
    
			
    2. 
						
  2. [转]使用ant让Android自动打包的build.xml,自动生成签名的apk文件(支持android4.0以上的版本)
			
    在android4.0以后的sdk里那个脚本就失效了,主要是因为 apkbuilder这个程序不见了: 人家sdk升级,我们的脚本也要跟上趟,修改一下喽. 上网一查,大家的文章还停留在我去年的脚本程度 ...
    
			
    3. 
						
  3. android px dp sp
			
    http://www.zcool.com.cn/article/ZMTUxODQw.html
    
			
    4. 
						
  4. C# 5.0 新特性——Async和Await使异步编程更简单
			
    http://www.cnblogs.com/zhili/archive/2013/05/15/csharp5asyncandawait.html http://blog.zhaojie.me/201 ...
    
			
    5. 
						
  5. 将STM32的标准库编译成lib
			
    转载自:http://www.cnblogs.com/zyqgold/p/3189719.html 以前一直使用STM32的标准库,需要一步步地将代码加进去,将编译选项设置好,然后再编译整个工程. 这 ...
    
			
    6. 
						
  6. python BDD 框架之lettuce
			
    http://pythonhosted.org/lettuce/ 介绍                                                                  ...
    
			
    7. 
						
  7. iOS- 微信支付 (服务器调起支付 )以及回调不成功的原因      不看后悔
			
    写的不错,给留个言哈... 一. 支付准备工作 1. 微信相关准备工作 (1) 向微信官方开通支付功能. 这个不是前端的工作. (2) 导入官方下载的微信支付SDK包. 我用的是微信开放平台下载的SD ...
    
			
    8. 
						
  8. NodeJS+Mongodb+Express做CMS博客系统
			
    楼主正在用业余时间开发中-- ,目前的版本仅支持会员系统,尝鲜一下吧~ hi-blog 一个 nodejs+express+mongodb 的 cms 系统 怎么启动 默认你已经安装了 mongodb ...
    
			
    9. 
						
  9. python编码问题的最终分析
			
    python初学者,往往因为字符编码的问题而苦恼不已,本人也是阅读了大量的博客,再进行了一定的测试,基本搞清楚了编码问题的前因后果.下面一段代码是在python3.5上的,以它为例进行讲解(请忽略糟糕 ...
    
			
    10. 
						
  10. java 版的复利计算器(张俊毅 周修文)
			
    (带有本金的选项卡的意思就是计算你在知道利率.年限和本息的情况下计算本金) 在利率的输入中能限制小数点的输入并且输入字母会被直接去除 每一个选项卡都有复利和单利的计算,并且在你计算之后会立即更新在下面 ...
    
			
    11.