问题描述:利用iframe做页面引入,用(window).resize()作自适应;结果窗口变小时,利用(window).resize()作自适应;结果窗口变小时,利用(window).width()获取到的宽度总是小于浏览器宽度,在左边留下17px宽度的白条。
代码如下:
<iframe id="main-wrapper" name="main-wrapper" src="zkt.htm" frameborder="0" style="float: right;"></iframe>
// 自适应主页面大小
$(window).resize(function () {
initSize();
}
// 初始化主页面大小
function initSize() {
var screenHeight = $(window).height();// 窗口高度
var navHeight = $("#topNav").height();// 顶部导航栏高度
var contentHeight = screenHeight - navHeight;// 内容区域高度
var screenWidth = $(window).width();// 窗口宽度
$("#main-wrapper").width(screenWidth);// 设置内容区域宽度
$("#main-wrapper").css("margin-top", navHeight);// 设置内容区域margin-top
$("#main-wrapper").height(contentHeight);// 设置内容区域高度
}
问题分析:在页面大小发生变化时,如果高度减小时,此时会出现滚动条,$(window).width()获取的宽度为减去滚动条之后的宽度,又因为iframe默认靠右,因此左边会出现空白。
解决方案:判断当页面高度减小时,将宽度设置为$(window).width()加上滚动条(默认17px)的宽度即可。
var initHeight = $(window).height() - $("#topNav").height();// 初始主页面高度
// 自适应主页面大小
$(window).resize(function () {
initSize();
}
// 初始化主页面大小
function initSize() {
var screenHeight = $(window).height();// 窗口高度
var navHeight = $("#topNav").height();// 顶部导航栏高度
var contentHeight = screenHeight - navHeight;// 内容区域高度
var screenWidth = $(window).width();// 窗口宽度
if (initHeight > contentHeight) {// 初始高度大于现有高度,高度变小过程中会出现滚动条
screenWidth = screenWidth + 17;// 窗口宽度变为现有宽度+滚动条宽度
}
initHeight = contentHeight;// 将初始高度重置为现有高度
$("#main-wrapper").width(screenWidth);// 设置内容区域宽度
$("#main-wrapper").css("margin-top", navHeight);// 设置内容区域margin-top
$("#main-wrapper").height(contentHeight);// 设置内容区域高度
}