首先创建两个页面

//iframe1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

          <p id="content">帅哥天下9</p>
         <script>
         console.log( window.parent.document.getElementById("testParent").innerHTML);
        //调用父框架
         </script>


</body>

</html>
//demo1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>
 <button id="btn">click</button>
 <div id="testParent">调用父框架</div>
 <iframe src="iframe1.html" id="iframe1" frameborder="1"></iframe>

 <script>

       var btn=document.getElementById("btn");

       var iframe1=document.getElementById("ifram1");

       btn.onclick=function(){

          iframe1.contentWindow.document.getElementById("content").

          style.background="red";

           //iframe1.contentDocument.getElementById("content")
            .style.background="red";

         }

 </script>

</body>

</html>

iframe1.contentWindow 获取 src设置页面的window对象然后操作里面的DOM

这个方法兼容IE 678 和其他主流浏览器 比如 FF Chrome 但是 Chrome对安全有保护

只可以在服务器端使用 可以用phpstudy测试

iframe1.contentDocument  IE低版本不支持

在Chrome同理

window.parent 调用父框架

window.top 调用顶层框架

//ifram2.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

     <button id="changeTopDiv">changeTopDiv</button>

     <iframe src="iframe2.html" frameborder="1" ></iframe>
     <script>
        var ctd=documet.getElementById("changeTopDiv");
        var topDiv=window.top.document.getElementById("topIframe");
        ctd.onclick=funtion(){


                topDiv.style.background="red";
         }
     </script>

</body>

</html>






//demo2.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

     <iframe src="iframe2.html" frameborder="1"></iframe>

</body>

</html>






//demo3.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

     <div id="topIframe">topIframe</div>

     <iframe src="demo2.html" frameborder="1"></iframe>

</body>

</html>




还有一个就是防止钓鱼


有的网站会把别的网站iframe进来 然后欺骗用户去操作一些东西 谋利


code




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <iframe src="test.html" frameborder="1"></iframe>

</body>

</html>






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    if(window !=window.top){
   //必须让当前页面为最高级别页面
          window.top.location.href=window.location.href;

    }

</body>

</html>




改变框架高度




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

          html,body{

             padding: 0;

             margin: 0;

       }

       .box{

          width:200px;

          height:200px;

          background: red;

       }

       </style>

</head>

<body>

     <div class="box"></div>

</body>

</html>






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

       html,body{

             padding: 0;

             margin: 0;

       }

       .box{

          width:200px;

          height:400px;

          background: green;

       }

    </style>

</head>

<body>

     <div class="box"></div>

</body>

</html>






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

     <iframe src="iframe5.html" frameborder="1" id="show" scrolling="no"></iframe>

     <button id="btn1">btn1</button>

     <button id="btn2">btn2</button>

     <script>

         var btn1=document.getElementById("btn1");

         var btn2=document.getElementById("btn2");

         var show=document.getElementById("show");

         function changeHeight(){

           setTimeout(function(){

              // 添加一个定时器 让他执行慢一点 
              //不然src刚执行完 html 还没刷新完
              // 就改变宽度 还是之前的宽度

                show.height=show.contentWindow.document.body.offsetHeight;

           }, 200);

         }

         changeHeight();

         btn1.onclick=function(){

              show.src="iframe5.html";

              changeHeight();

         }

         btn2.onclick=function(){

              show.src="iframe6.html";

              changeHeight();

         }

     </script>

</body>

</html>




写到这里 累死我了


最后一个就是iframe 的load事件




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

     <iframe src="iframe8.html" frameborder="1" id="show" scrolling="no"></iframe>

       
        <script>


           var show=document.getElementById("show");
           show.onload=function(){
             alert("加载完毕！");
          }

         //ie 也支持这个事件  但是 IE事件不能这么用
         //得需要事件绑定才可以  
       //show.attachEvent("click",function(){

           alert("加载完毕");

         });


        </script>

     </script>

</body>

</html>


												


											
操作iframe 的方法与兼容性的更多相关文章
	

    
								
  1. jquery操作iframe的方法：父页面和子页面相互操作的方法
		
    今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互 ...
    
		
    2. 
						
  2. 操作iframe的方法
		
    子页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
    
		
    3. 
						
  3. js学习笔记：操作iframe
		
    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
    
		
    4. 
						
  4. jquery 操作iframe的几种方法总结
		
    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
    
		
    5. 
						
  5. JQuery操作iframe父页面与子页面的元素与方法
		
    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
    
		
    6. 
						
  6. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法
		
    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...
    
		
    7. 
						
  7. jQuery操作iframe中js函数的方法小结
		
    1.jquery操作iframe中的元素(2种方式) ? 1 2 var tha = $(window.frames["core_content"].document).find( ...
    
		
    8. 
						
  8. jquery方法操作iframe元素
		
    操作iframe父元素 $("#rolesCtl",parent.document).find( 'button' ).trigger( 'click' ); 在父页面获取ifra ...
    
		
    9. 
						
  9. 操作iframe的一些方法
		
    //父页面操作iframe里的内容 oInput.onclick=function(){ var oBox = oIframe.contentWindow.document.getElementByI ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. elementUI 通用确认框
			
    Util.vue <script> import VueResource from 'vue-resource' function confirm(_this, operate, fun) ...
    
			
    2. 
						
  2. dedecms织梦让channelartlist标签支持currentstyle属性
			
    打开include\taglib\channelartlist.lib.php  大约93行 找到: $pv->Fields['typeurl'] = GetOneTypeUrlA($typei ...
    
			
    3. 
						
  3. 【NOI】2017 整数（BZOJ 4942，LOJ2302） 压位+线段树
			
    [题目]#2302. 「NOI2017」整数 [题意]有一个整数x,一开始为0.n次操作,加上a*2^b,或询问2^k位是0或1.\(n \leq 10^6,|a| \leq 10^9,0 \leq  ...
    
			
    4. 
						
  4. Sublime Text 2 破解 on Mac
			
    用Sublime Text 2自己打开自己的二进制文件:Sublime Text 2/Contents/MacOS/Sublime Text 2 搜索所有3342 3032 都替换成3242 3032 ...
    
			
    5. 
						
  5. Docker学习笔记一 概念、安装、镜像加速
			
    本文地址:https://www.cnblogs.com/veinyin/p/10406378.html  Docker 是一个容器,可以想象成一个轻便的虚拟机,但不虚拟硬件和操作系统. 优点:启动快 ...
    
			
    6. 
						
  6. HDU 1229 还是A+B（A+B陶冶情操）
			
    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1229 解题报告:A+B #include<cstdio> int main() { int ...
    
			
    7. 
						
  7. HDU   2073    无限的路    （模拟）
			
    题目链接 Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现 ...
    
			
    8. 
						
  8. Zookeeper笔记之使用zk实现集群选主
			
    一.需求 在主从结构的集群中,我们假设硬件机器是很脆弱的,随时可能会宕机,当master挂掉之后需要从slave中选出一个节点作为新的master,使用zookeeper可以很简单的实现集群选主功能. ...
    
			
    9. 
						
  9. 字符串格式化（百分号&format）
			
    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号方式: %[(name)][flags][width].[precision]typecode [  ]:表示 ...
    
			
    10. 
						
  10. 初识 Asp.Net数据验证控件
			
    在我们建立一个Asp.Net Web应用程序的时候我一般都会注意我们工具如图
    
			
    11.