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>