js操作iframe实例讲解(兼容各种浏览器)

时间:2018-09-18
本文章向大家介绍js操作iframe实例讲解(兼容各种浏览器),需要的朋友可以参考一下

首先创建两个页面

//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>