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/

使用javascript调整动态网页的大小

2 个答案: