使用 javascript 调整动态网页大小

Question

我目前有一个页面，当最终用户调整窗口大小时，该页面正在通过使用 javascript 调整大小，以便在不需要时减少或消除滚动。我有一个 loader.js jquery 文件，当用户从左侧菜单中选择一个选项时，它会挑选出 .html 文档以放入页面的内容部分：

$("#response").load("home.html");
$("#home").click(function(){
// load home page on click
    $("#response").load("home.html");
    setTimeout("resizefunc()",500);
});
$("#about").click(function(){
// load about page on click
$("#response").load("about.html");
    setTimeout("resizefunc()",500);
});
//etc

虽然这些超时功能大部分时间都有效，但如果页面加载异常缓慢，它们可能会因任何原因而失败。我正在使用 document.ElementId.scrollHeight 来确定每个新页面的高度，但它似乎只检测正确应用更改后的高度。如果 javascript 在页面内容之前加载，则调整大小失败。

似乎如果我对每个页面都使用完整的 html 文档，那么问题就无关紧要了。我可以将一个 onLoad 事件放入每个事件的主体中，并在那里调整其大小……但由于标签仅在我有点不知所措时才加载。我目前的实现“有效”，但我觉得应该有更有效的东西。

Answer 1

不要使用 onLoad，而是将代码包装在

中

$(window).load(function() {
  // your code here
});

另外，不要使用仅将文件名作为参数的 load()，而是使用：

$('#response').load('file.html', function() {
  resizefunc();
});

Answer 2

除了“加载”，您还可以使用“调整大小”作为事件之一。这将允许动态调整大小。

$(window).resize(function() {
    resizefunc()
});

function resizefunc() 
{
   // code to resize.
}

见：http://api.jquery.com/resize/