前几天做项目,客户说ifream有滚动条不美观,让我把滚动条去掉。我当时有点懵,因为滚动条是我特意加上去的。因为原生的ifream不能根据子页面的高度自动设置其显示高度,如果没有滚动条,当子页面的高度超出了ifream 的height,会导致子页面的一些数据无法显示。但是既然客户提出来去掉ifream的滚动条了,那就要想办法实现客户的需求,同时保证显示的正确性。
废话不多说,下面是我经过一系列尝试得到的最有效的方法。
主要思想是:先给ifream设置一个最小高度,在其js文件中,编写一个设置ifream的函数reinitIframe(height) ,每次加载子页面的时候获取子页面的高度(注意获取子页面的高度是document.body.clientHeight),然后让该页面去调用ifream对应js文件中的reinitIframe(height) 。
代码如下:
main.jsp
<!-- 为ifream设置一个最小高度:style="min-height: 800px" -->
<iframe name="contentIframe" id="contentIframe" frameborder="0" scrolling="no" width="100%" style="min-height: 800px"></iframe>
main.js
/**
* 去掉滚动条
* @param height
* @returns
*/
function reinitIframe(height) {
var iframe = document.getElementById("contentIframe");
iframe.style.visibility = 'hidden';
iframe.setAttribute('height', 'auto');
iframe.height = height;
iframe.style.visibility = 'visible';
}
子页面.jsp
$(document).ready(function() {
window.parent.reinitIframe(document.body.clientHeight);
});
下面是我百度去掉ifream过程中尝试的一些方法,之所以没有用他们,是因为他们或多或少存在一些问题。下面列举几条:
方法一:
$('#contentIframe').load(function() {
var iframeHeight = Math.min(document.getElementById('contentIframe').contentWindow.window.document.documentElement.scrollHeight, document.getElementById('contentIframe').contentWindow.window.document.body.scrollHeight);
var h=$(this).contents().height();
$(this).height(h+'px');
});
存在的问题:该方法适应的是自己电脑屏幕的高度。这个对于超出ifream高度的数据仍旧显示不出来。可能屏大的会显示完全,但是屏小的就没法说了。所以pass掉。
方法二:
function reinitIframe() {
var iframe = document.getElementById("contentIframe");
iframe.style.visibility = 'hidden';//先隐藏掉此ifream,防止在页面变化时ifream高度变化,电脑出现闪的情况
iframe.setAttribute('height', 'auto');//先将原来ifream框架的高度设为自动。不然会出现“有小到大自适应、由大到小不适应”的情况
try {
var bHeight =iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
iframe.style.visibility = 'visible';
} catch (ex) { }
}
window.setInterval("reinitIframe()", 100);//定时去检查iframe的高度,这样保证时时都是自动高了
存在的问题:这个方法是定时的去设置ifream的高度。因为定时,所以需要不断刷新。假如屏幕中有滚动条(此滚动条非ifream的滚动条),下拉屏幕的滚动条,等到了刷新时间了,屏幕又回到其实位置,而非刚刚你定位的那个位置。所以pass掉。