今日在微博看到这样一个介绍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）
貌似不行喔……
好 方法二
<!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" 一样不行……
求高手指点！
分享到：
相关推荐
VB 窗体自适应屏幕分辨率大小可以解决多种屏幕分辨率下的窗体显示问题，使窗体在不同屏幕分辨率下的正确显示。同时，自适应屏幕分辨率大小也可以提高窗体的可读性和可用性。 四、VB 窗体自适应屏幕分辨率大小的应用...
本篇文章将深入探讨如何在LabVIEW中实现窗口的自适应功能，确保程序在各种屏幕尺寸下都能良好地显示。 首先，我们需要了解LabVIEW中的窗口布局。LabVIEW界面由不同的VI（虚拟仪器）组成，这些VI包括前面板和程序...
在“labview 自适应屏幕分辨率程序”这个主题中，我们主要关注的是如何使LabVIEW应用程序在不同分辨率的屏幕上正常显示并保持良好的用户体验。 1. **屏幕分辨率理解**： - 屏幕分辨率是指屏幕上像素点的数量，通常...
这个“LabVIEW自适应屏幕分辨率.rar”压缩包很可能包含了一系列关于如何使LabVIEW应用程序在不同分辨率的显示器上正常显示的教程、示例代码或指南。在现代多显示器环境下，确保程序界面在各种屏幕尺寸下都能清晰、...
Android提供了多种方式来实现屏幕自适应，例如使用布局文件、样式和权重布局等。通过这些方式，可以使屏幕布局适应不同的屏幕尺寸和方向。 六、屏幕方向 屏幕方向是指屏幕的orientaton，例如竖向、横向等。Android...
本文将深入探讨U3D中的自适应屏幕策略和实现方法。 一、屏幕尺寸与分辨率 在Unity3D中，屏幕尺寸指的是物理设备的显示屏大小，而分辨率则是屏幕上像素的数量。为了使游戏或应用在不同设备上看起来一致，我们需要...
本话题将深入探讨如何在LabVIEW中实现自适应屏幕分辨率的策略，并通过源码分析来理解其实现方式。 首先，理解自适应屏幕分辨率的基本原理。在多分辨率环境下，自适应设计意味着程序界面能够根据显示器的像素密度...
屏幕自适应。调用这个VI的上层VI在调整好界面后，一定要将前面板的最小尺寸设置为当前前面板大小。
以下是对这两个库以及与`iframe`、高度自适应和背景颜色处理相关的知识点的详细解释。 首先，`html2canvas`是一个JavaScript库，它的主要功能是将DOM（文档对象模型）转换为Canvas元素。这个过程被称为“屏幕截图”...
PyQt5实现UI界面及内部控件自适应屏幕大小显示
为了解决这个问题，我们需要一种方法来动态地调整`iframe`的高度，使其与内容匹配。这种技术通常涉及到JavaScript，通过监听`iframe`的`load`事件，然后获取`iframe`内的文档高度，并设置到`iframe`的`height`属性上...
这篇文档“关于自适应屏幕方向和大小的一些经验”将深入探讨这个主题。 1. **响应式设计**: 响应式设计是解决屏幕适配问题的关键。这种设计方法允许页面根据设备的屏幕尺寸和方向自动调整布局。通过使用弹性网格、...
在Android开发中，面对各种不同尺寸和分辨率的设备，如何实现屏幕自适应是一个重要的课题。本文将详细解析Android系统如何处理屏幕自适应问题，并提供相应的解决策略。 首先，Android界面开发推荐使用“density-...
在这个“labview论坛-自适应屏幕分辨率.rar”压缩包中，我们聚焦的是LabVIEW程序如何适应不同电脑的屏幕分辨率，确保在各种尺寸的显示器上都能正确并完整地显示内容。 在开发LabVIEW应用时，特别是在设计用户界面...
Screen Space - Overlay模式下的GUI元素会覆盖整个屏幕，不考虑相机视角，因此易于实现屏幕自适应。而Screen Space - Camera模式将GUI元素放置在特定相机的视口内，可以实现更复杂的3D空间布局，但自适应处理需要更...
多层嵌套iframe 自适应高度的解决方法
标题“制作自适应屏幕大小尺寸的网页，改变分辨率后需F5刷新.zip”暗示了这个压缩包可能包含了一些关于实现自适应网页设计的方法和技巧。 描述中提到的“改变分辨率后需F5刷新”，这通常是因为网页在设计时可能使用...
添加事件Load和事件SizeChanged并在事件中调用AutoSizeFormClass类的方法 比如： private void MainFrame_Load(object sender, EventArgs e) { asc.controllInitializeSize(this); } private void MainFrame...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
在网页设计中，让内容能够自适应不同屏幕尺寸和设备是至关重要的，这不仅可以提供良好的用户体验，也是现代网站设计的标准。jQuery作为一个强大的JavaScript库，提供了许多功能来帮助开发者实现这样的效果，尤其是...