使用jquery将html字符串加载到div中
Posted
技术标签:
【中文标题】使用jquery将html字符串加载到div中【英文标题】：Loading html string into div with jquery 【发布时间】：2012-07-15 12:14:33 【问题描述】：我正在尝试将一大段 html 加载到我的 div 中，但我遇到了 html 字符串中的 javascript 仅在大约 50% 的时间加载的问题。
我知道我可以使用 jQuery：
$(div).html(htmlString);
将 html 加载到必要的 div 中。导致问题的 html 是在文档就绪块中完成的，我很好奇在使用 .html(..) 时是否执行了文档就绪代码，因为页面作为一个整体已经就绪，而加载的 html 内部（主要jquery-ui js) 可能不是？？
<html>
<head>
<script src="..../jquery-ui.min.js"></script>
<script type="text/javascript"> $(function() $("#tabs").tabs(); ); </script>
</head>
<body>
<div>......</div>
</body>
</html>
我已尝试在添加的 html 中应用超时以尝试为 jquery-ui 脚本添加时间来加载：
$(function() setTimeout(function() $("#tabs").tabs(); , 300); );
但这仍然不是 100% 可靠，因为加载必要的 javascript 所需的时间可能会有所不同。有没有办法确保加载的 html 的文档就绪状态一直等到 jquery ui 脚本加载完成？
【问题讨论】：
HTML 加载时的代码在哪里？在最坏的情况下，您可以将script 移动到正文中，就在</body> 结束标记之前。此外，如果元素使用 $(document).ready(function() 加载到 DOM 中，那么 $('#tabs').tabs(); 必须在 `*HTML 注入*之后*
@Ohgodwhy html 仅使用 $(div).html(contents);很抱歉把它漏掉了。而且我还尝试将
【参考方案1】：
您应该始终将您的脚本和 js 文件放在正文的末尾。原因是任何放入头部的东西都必须在加载主体之前完成，因此将 javascript 放在那里通常是个坏主意。最好是安全的并将其添加到底部。
延迟也不会增加您在这里的机会。
<html>
<head>
<title>hey you</title>
</head>
<body>
<div>......</div>
<script src="..../jquery-ui.min.js"></script>
<script type="text/javascript">
$(function()
$("#tabs").tabs();
);
</script>
</body>
</html>
【讨论】：
不，这是错误的。所有脚本都应该放在 head 部分。 使用$(document).ready(function() ); 不需要将脚本放在body 标记的末尾 - 它可以在head 内
已更新，为 manseUK 加油。 @LeeTaylor 需要详细说明吗？我也不同意你的观点。
@LeeTaylor 这是不正确的。脚本不需要进入标题。出于传统，它们被放入标题中。 Javascript 将在解析过程中找到的任何地方执行，无论它是否在头部。如果您查看 Twitter Bootstrap 示例，您会看到它们在页面末尾包含了他们的 javascript。这消除了对 $().ready 的需求，因为一旦解析器到达这些脚本，DOM 就已经准备好了。这样做也有性能提升。看到这个问题：***.com/questions/1213281/…
是的，这只是我的老派情怀。我已经阅读了这一点，我意识到情况不再如此（脚本的放置）。但是，应使用 onLoad() 或 $(document).ready 来保证 DOM 已准备好进行操作。【参考方案2】：
发现了问题，John Doe 在这个问题中的帖子有助于找到答案 - JavaScript Load Order。
jquery-ui.min.js 加载在 insite 脚本之后，无论它们在页面上的什么位置（在头部或</body> 标记之前）。我最终做的是使用$.ui 对jquery ui 进行检查，并将async 属性添加到脚本标签
<script async src=".../jquery-ui.min.js"></script>
加载 jquery ui 后，我可以继续调用 $("#tabs).tabs();。
感谢 cmets 和帖子！
【讨论】：
以上是关于使用jquery将html字符串加载到div中的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery 将 HTML 页面动态加载到 div 中
无法将谷歌静态地图加载到jquery mobile中的div中
jQuery 将 div 加载到另一个没有 .html() 方法的