欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

操作iframe 的方法与兼容性

程序员文章站 2023-01-02 11:13:54
首先创建两个页面 iframe1.contentWindow 获取 src设置页面的window对象然后操作里面的DOM 这个方法兼容IE 678 和其他主流浏览器 比如 FF Chrome 但是 Chrome对安全有保护 只可以在服务器端使用 可以用phpstudy测试 iframe1.conte ......

首先创建两个页面

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