我有一个包含一些选项卡式内容的页面。有几个选项卡包含iframe,我使用一个方便的小脚本来调整iframe的大小以适应其内容。它的在iframe的内容上使用Javascript
function autoResize(id){
var newheight;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
newheight=(newheight)+40; // Makes a bit of extra room
document.getElementById(id).height= (newheight) + "px";
}
今天我已经添加了一个小的jQuery脚本来停止显示标签区域,直到它被完全加载。当加载完成时,这会阻止标签进行难看的小跳跃。这是脚本:
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
加载div包含加载图标和tabber div是选项卡区域的整个内容。
该脚本还停止了iframe调整大小的工作。为了更好地理解它,我添加了另一个脚本:
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
果然,“赢”作为零来了。如果我删除$(“#tabber”)。hide()行,“win”会显示iframe高度的合理数字。
是否有另一种方法使两者兼容?
Vlad提出的解决方案:我不得不使用jQuery版本的visibility = hidden,而不是jQuery版本的display:none。这实际上并不存在于jQuery中,所以我从another StackOverflow question中发现了如何编写自己的函数来完成它。
最终的脚本是
(function($) {
$.fn.invisible = function() {
return this.each(function() {
$(this).css("visibility", "hidden");
});
};
$.fn.visible = function() {
return this.each(function() {
$(this).css("visibility", "visible");
});
};
}(jQuery));
$(document).ready(function(){
$("#tabber").invisible();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").visible();
});
我要感谢弗拉德,也RAS,采取的麻烦看一下我的问题,并给他们的想法。
您是否尝试在文档就绪或窗口加载中打包调整大小? – RAS 2013-03-19 18:20:09
我尝试过,但无法使它工作。 – TrapezeArtist 2013-03-19 22:41:48