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. WCF的传输安全(读书笔记)
			
    Wcf的传输安全主要涉及认证.消息的一致性和机密性.Wcf采用两种不同的机制来解决这三个涉及传输安全的问题,即Transport安全模式和Message安全模式. Transport安全模式利用基于传 ...
    
			
    2. 
						
  2. Some User Can Not Execute "Ship Confirm"(Doc ID 473312.1)
			
    APPLIES TO: Oracle Shipping Execution - Version 11.5.10.2 and later Information in this document app ...
    
			
    3. 
						
  3. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法
			
    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
    
			
    4. 
						
  4. Java Job
			
    1.在META-INF\MANIFEST.MF中指定Main-Class Main-Class: test.HelloWorld 命令:java -jar fileName.jar 2.不指定Main ...
    
			
    5. 
						
  5. Unity3D 游戏开发之内存优化
			
    项目的性能优化主要围绕CPU.GPU和内存三大方面进行. 无论是游戏还是VR应用,内存管理都是其研发阶段的重中之重. 然而,在我们测评过的大量项目中,90%以上的项目都存在不同程度的内存使用问题.就目 ...
    
			
    6. 
						
  6. 《微信小程序七日谈》- 第一天：人生若只如初见
			
    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
    
			
    7. 
						
  7. 给你的博客加上“Fork me on Github”彩带
			
    起 如今,随着Git的大热以及Github的优越性,许多知名开源项目都将源代码托管到Github上了.在Github上不仅可以托管自己的开源项目,还可以Fork人家的源代码,给自己感兴趣的项目评价(s ...
    
			
    8. 
						
  8. html图片上下翻滚展示代码
			
    <marquee behavior="alternate" scrolldelay="1" direction="up" width= ...
    
			
    9. 
						
  9. 2015年最热门前端框架React 入门实例教程
			
    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
    
			
    10. 
						
  10. 新的Visual C++代码优化器
			
    微软在 5 月 4 日发布了新的高级代码优化器,服务于 Visual C++ 的后端编译器.提高了代码性能,可以压缩代码体积,将编译器带入了一个新的境界. Visual C++ 的团队在博客上称,这将 ...
    
			
    11.