iframe的自适应

最新推荐文章于 2022-10-25 14:03:49 发布

dianchan2938

最新推荐文章于 2022-10-25 14:03:49 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wanglaowu/p/6138268.html

版权

iframe标签的应用感觉很强大，但是有的低版本好像不是很兼容，所以有的时候需要注意这个的兼容问题，iframe 元素会创建包含另外一个文档的内联框架（即行内框架），他的属性有很多，也很容易理解，就不一一列举了，不过有的时候它的透明度却是一个难题，

这样就能解决这个透明度问题了，前提是背景没有设置颜色。。。

它的自适应高度有的时候很难控制，这里需要一小段js代码即可。

<iframe src=”http://www.baidu.com” id=”frame” scrolling=”no” οnlοad=”hehe()” ></iframe>

function show(){
var frame= document.getElementById(“frame”);
frame.height=document.documentElement.clientHeight;

}

function hehe(){

show();

window.οnresize=function(){
show();

}

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .hehe{
                height: 20px;
                width: 100px;
                background: pink;
                border: 1px solid black;
                cursor: pointer;
            }
            .changed{
                height: 600px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="hehe" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
                  点我试试            
        </div>
        <div class="changHand">
            <iframe id="btn1"  width="100%" height="600px" scrolling="auto" frameborder="no"></iframe>
        </div>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">    
    function click(){
         var n = 0;    
        $(".hehe").on("click",function(){    
                if(n%2 == 0){
                $("#btn1").attr("src","http://www.baidu.com");            
            }
        else{                            
            $("#btn1").attr("src",""); 
        }
            n++;
        })
    
        
    }
        click();
    </script>
</html>