探讨“多种方法制作自适应屏幕的iframe”

今日在微博看到这样一个介绍http://www.mhtml5.com/2012/10/5397.html 《多种方法制作自适应屏幕的iframe》
本人一年前都曾为这个iframe高度自适应问题搞尽脑汁,试过网上多种方法 都是无法完美解决 当见到这篇文章时 真的喜出望外 于是就马上新开个txt文件ctrl+c ctrl+v 欲试个究竟

<!DOCTYPE html>
<html>
<head>
<title>iframe test</title>
</head>
<body>
<iframe name="main" src="http://www.mhtml5.com" frameborder="0" scrolling="no" 
onload="this.height=main.document.body.scrollHeight+20" width="100%"></iframe>
</body>
</html>

 
结果…… (Chorme)
探讨“多种方法制作自适应屏幕的iframe”_第1张图片
貌似不行喔……
好 方法二

 

<!DOCTYPE html>
<html>
<head>
<title>Swapping Songs</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script language="JavaScript">
if(!Array.prototype.map)
Array.prototype.map = function(fn,scope) {
var result = [],ri = 0;
for (var i = 0,n = this.length; i < n; i++){
if(i in this){ result[ri++] = fn.call(scope ,this[i],i,this); }
}
return result;
};
var getWindowWH = function(){
return ["Height","Width"].map(function(name){
return window["inner"+name] || 
document.compatMode === "CSS1Compat" && document.documentElement[ "client" + name ] || 
document.body[ "client" + name ]
}); }
window.onload = function (){
if(!+"\v1" && !document.querySelector) { //IE6 IE7
document.body.onresize = resize;
}
else { window.onresize = resize; }
function resize() { wSize(); return false;
}
}
function wSize(){
var str=getWindowWH();
var strs= new Array();
strs=str.toString().split(","); //字符串分割
var h = strs[0] - 95-30;
alert(h);
$('#Main').height(h); }
wSize();
</script>
</head>
<body>
<iframe name="main" src="http://www.mhtml5.com" frameborder="0" scrolling="no" width="100%"></iframe>

</body>
</html>

 结果一样 
查看代码 以为是 他写错了

$('#Main').height(h);

 和

<iframe name="main" 

  我同样该成 $('#main').height(h);  和 <iframe id="main"  一样不行……
求高手指点!

  

你可能感兴趣的:(html,iframe,iframe自适应)