javascript - 使用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();
});