使用javascript調整大小的動態網頁

我目前有一個頁面，只要最終用戶調整窗口大小，就可以通過使用javascript來調整大小，以便在不必要時減少或消除滾動。我有當用戶選擇從左側菜單中的選項，挑選出的.html文件一個loader.js jQuery的文件扔在頁面的內容部分：使用javascript調整大小的動態網頁

$("#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事件放入每個事件的主體中，並在那裏調整它的大小......但是由於標記只會在我有點茫然的時候加載。我目前的實施「有效」，但我覺得應該有更有效率的東西。

來源

2011-05-26 Ryan Baker

不要使用的onLoad，而不是隻用文件名作爲參數，使用包裹在

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

而且你的代碼，而不是負載（）：

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

來源

2011-05-26 03:46:55 Claudiu

改變每個超時到你上面列出的是什麼和它的工作。不知道爲什麼它會這樣工作，但不是如果我只是在.load之後調用resize函數，但在相同的點擊事件中......不管怎樣，感謝您的快速回復 – 2011-05-26 03:56:59

無後顧之憂。它可以工作，因爲load（）函數中的第二個參數是一個回調函數，在內容加載後觸發，無需「猜測」內容加載需要多長時間。 PS：如果答案是正確的解決方案，則將答案標記爲答案:) – Claudiu 2011-05-26 03:59:25

對不起，第一次在這裏發佈問題：P現在標記了。 – 2011-05-26 04:01:25

了「負載「你也可以使用」調整大小「作爲事件之一。這將允許動態調整大小。

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

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

參見：http://api.jquery.com/resize/

來源

2011-05-26 04:03:10

我沒有意識到.resize（）在頁面滾動長度改變時觸發......我只是假定它只是實際的窗口邊框調整大小。如果是這樣的話，那麼這也是一個有效的答案。我醒來的時候明天再試一試。 – 2011-05-26 04:26:27

@Ryan Baker - 是的，試試看，通常我們一起使用「加載」和「調整大小」。您可以使用「css」來實現html內容的實際大小調整。 – 2011-05-26 04:33:51

使用javascript調整大小的動態網頁

回答

相關問題