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. 使用jQuery开发iOS风格的页面导航菜单
			
    在线演示1 本地下载     申请达人,去除赞助商链接 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航. HTML代码 我们 ...
    
			
    2. 
						
  2. sublime返回上一编辑位置
			
    用了sublime好长时间了,最近发现一个python插件可以在编辑的时候返回上一编辑位置,这个功能在eclipse很常用,现在终于能在sublime上使用了.好爽. 贴个地址:https://for ...
    
			
    3. 
						
  3. 数轴上从左到右有n个点a[0],a[1]…,a[n-1]，给定一根长度为L的绳子，求绳子最多能覆盖其中的几个点。要求算法复杂度为o(n)。
			
    #include <iostream> using namespace std; int maxCover(int* a, int n, int l) { ; ; ; while(end  ...
    
			
    4. 
						
  4. 在Windows/Ubuntu下安装OpenGL环境（GLUT/freeglut)与跨平台编译（mingw/g++）
			
    GLUT/freeglut 是什么? OpenGL 和它们有什么关系? OpenGL只是一个标准,它的实现一般自带在操作系统里,只要确保显卡驱动足够新就可以使用.如果需要在程序里直接使用OpenGL, ...
    
			
    5. 
						
  5. osgi: HttpService  A null service reference is not allowed.
			
    最近在学习osgi,在练习HttpService的过程中,一直出现“A null service reference is not allowed”这样的报错,代码本身没有问题,在网上也搜了不少地方, ...
    
			
    6. 
						
  6. windbg入门
			
    1.下载安装windbg Windows 10 调试工具 (WinDbg) 如果你仅需要 Windows 10 调试工具,而不需要 WDK 10 或 Visual Studio 2015,你可以将调试 ...
    
			
    7. 
						
  7. Python Django开发 1
			
    先配置个虚拟环境,在Flask第一篇文章有写,这里就跳过了 比如我的Django的目录是:C:\Workspaces\DjangoDemo,已经安装好了名为venv虚拟目录,接下来安装django框架 ...
    
			
    8. 
						
  8. WCF 遇到的问题
			
    1.只有项目的net版本2.0以上的才可以引用到wcf的类库 2.HTTP 错误 404.17 - Not Found  映射问题   WCF服务建立好,提示这个错误,缺少映射问题,要将应用程序池和项 ...
    
			
    9. 
						
  9. Python——目录操作
			
    注意之前要import os 1．获得当前路径 在Python中可以使用os.getcwd()函数获得当前的路径.其原型如下所示. os.getcwd() 该函数不需要传递参数,它返回当前的目录.需要 ...
    
			
    10. 
						
  10. MyBatis知多少（12）私有数据库
			
    如果你从事软件开发工作有了一段时间的话,那么肯定听过关于“自己动手还是花钱购买” 的争论.该争论是说,针对一个业务问题,我们是应该自己动手构建自己的解决方案呢,还是应 该花钱购买一个声称已经解决了此问 ...
    
			
    11.