我试图在通过 AJAX 加载新的 HTML 内容后调整 div 的大小。我有一个 hashbang 链接系统,如果 URL 中存在某些哈希值,它会加载特定的 HTML 片段。当按下链接加载内容时,div 高度会正确调整大小,但直接导航到页面时,加载内容的计算高度始终会减少 20px。
HTML:
<div id="help_page_header">
<h3>Need some help with searches?</h3>
<ul class="help_tabs">
<li class="help_tab"><a class="docs_link" rel="recommendations" href="#!/recommendations">Recommendations</a></li>
<li class="help_tab"><a class="docs_link" rel="whats_hot" href="#!/whats_hot">What's Hot</a></li>
<li class="help_tab"><a class="docs_link" rel="history" href="#!/history">History</a></li>
<li class="help_tab"><a class="docs_link" rel="misc" href="#!/misc">Additional Features</a></li>
</ul>
</div>
<div class="help_page_content">
<p>Select a help topic above!</p>
</div>
...
jQuery:
$(document).ready(function(){
if(window.location.hash)
{
loadContent(window.location.hash)
}
$(".docs_link").click(function(e){
$(".help_page_content").html("")
var fragment = this.hash
loadContent(fragment)
});
function loadContent(fragment)
{
fragment = fragment.slice(1).replace(/!\//g, "");
$(".help_page_content").load("./"+fragment+".html", function(){
var height = $("#ajax_page_wrap").outerHeight();
$(".help_page_content").animate({height: height}, 500);
});
}
});
一个澄清的例子:
如果我直接导航到 www.homepage.com/docs/,然后单击其中一个帮助链接来加载内容,则高度计算得很好。但是,如果我导航到 www.homepage.com/docs/#!/history,计算出的高度始终比应有的高度小 20 像素左右。
最佳答案
当您直接导航到 #ajax_page_wrap
div 时,是否有尚未加载的图像(并且 AJAX 调用在加载之前已完成)?
使用 $(window).load
(等待所有图像加载)而不是 $(document).ready
(不加载)怎么样?请参阅this answer.
希望有帮助!让我知道这是否不是问题,我会继续集思广益:)
关于javascript - AJAX 调用 jQuery 后调整 div 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10625793/