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

最新推荐文章于 2024-05-02 21:34:43 发布

loveless0836

最新推荐文章于 2024-05-02 21:34:43 发布

阅读量115

点赞数

分类专栏： html iframe 文章标签： iframe html iframe自适应

本文链接：https://blog.csdn.net/loveless0836/article/details/84340133

版权

html iframe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今日在微博看到这样一个介绍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" 
οnlοad="this.height=main.document.body.scrollHeight+20" width="100%"></iframe>
</body>
</html>

结果…… （Chorme）

貌似不行喔……
好方法二

<!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" 一样不行……
求高手指点！

loveless0836

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
探讨“多种方法制作自适应屏幕的iframe”

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

扫一扫