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. LeetCode：4_Median of Two Sorted Arrays | 求两个排序数组的中位数 | Hard
			
    题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...
    
			
    2. 
						
  2. Oracle数据库入门——pctfree和pctused详解
			
    一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示当数据块的可用空间低于10%后,就不可以被insert ...
    
			
    3. 
						
  3. 协作图 Collaboration diagram
			
    概述 协作图也是一种交互图,但一般用的比较少,一般用在大概分析一下对象之间是怎样交互的,跟顺序图是可以相互转化的. 协作图的用处: 在分析的时候(而顺序图一般设计的时候),分析出有哪些对象: 在白板上 ...
    
			
    4. 
						
  4. coreseek 提示 client version is higher than daemon version 解决办法
			
    安装好coreseek,开启了服务之后,通过 sphinx php扩展去请求数据,提示:client version is higher than daemon version (client is  ...
    
			
    5. 
						
  5. Container Stack
			
    
			
    6. 
						
  6. teamcity设置
			
    建立项目后首先要设置svn地址,并绑定 名字随便起 url是svn的地址 之后来做build step 有一个按钮可以自动检测,一般都能检测出来 执行这个似乎需要代理装什么东西 可以查看目前代理有那些 ...
    
			
    7. 
						
  7. AutoMapper用法一瞥
			
    前段时候做个小项目用到了autoMapper(参考了NOP里的用法),感觉还行,用起来挺方便的.首先复杂的东西我就不说了,至于详细的教程我也就不写了,比较园子里有很多这样的文章,我就分享下,在项目中实 ...
    
			
    8. 
						
  8. js-条件语句、循环语句
			
    一. 常见条件语句 if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 if... ...
    
			
    9. 
						
  9. ActiveMQ学习（一）——MQ的基本概念
			
    1) 队列管理器 队列管理器是MQ系统中最上层的一个概念,由它为我们提供基于队列的消息服务. 2) 消息 在MQ中,我们把应用程序交由MQ传输的数据定义为消息,我们可以定义消息的内容并对消息进行广义的 ...
    
			
    10. 
						
  10. sprint3（第六天）
			
    由于昨天下午晚上停电又没网,所以我们没做成什么功能,而且也没发博客. 今天燃尽图:
    
			
    11.