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

问题描述

|| 我目前有一个页面，只要最终用户调整窗口大小，就可以通过使用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事件，并在该事件中调整大小...但是由于仅在我有点不知所措的情况下加载标记，我当前的实现“可行”，但我认为应该有一些更有效的方法。     

解决方法

不要使用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/