iframe标签的应用感觉很强大，但是有的低版本好像不是很兼容，所以有的时候需要注意这个的兼容问题，iframe 元素会创建包含另外一个文档的内联框架（即行内框架），他的属性有很多，也很容易理解，就不一一列举了，不过有的时候它的透明度却是一个难题，
<iframe src=”” allowtransparency=”true” style=”background-color=transparent” title=”” width=”” height=”” scrolling=”no”></iframe>
这样就能解决这个透明度问题了，前提是背景没有设置颜色。。。
它的自适应高度有的时候很难控制，这里需要一小段js代码即可。
<iframe src=”http://www.baidu.com” id=”frame” scrolling=”no” onload=”hehe()” ></iframe>
function show(){
var frame= document.getElementById(“frame”);
frame.height=document.documentElement.clientHeight;}
function hehe(){
show();
window.onresize=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>