使用javascript动态调整网页大小

Dynamic web page resizing with javascript

本文关键字：网页 调整 javascript 动态 使用      更新时间：2023-09-26

我目前有一个页面，每当最终用户调整窗口大小时，都会使用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

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

似乎如果我对每个页面使用完整的html文档，那么问题就无关紧要了。我可以将onLoad事件放在每个事件的主体中，并在那里调整大小。。。但由于标签只加载一次，我有些不知所措。我目前的实现"有效"，但我觉得应该有更有效的方法。

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

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

另外，不要只使用文件名作为参数的load（），而是使用：

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

除了"load"，您还可以使用"resize"作为事件之一。这将允许动态调整大小。

$(window).resize(function() {
    resizefunc()
});
function resizefunc() 
{
   // code to resize.
}

请参阅：http://api.jquery.com/resize/

相关文章：