背景故事
我正在创建一个 Web 应用程序，其中各个页面通过 jQuery .load“加载”功能。最初加载的页面是一个文件，但随着它越来越长，我决定将其拆分为一个 .html 文件、一个 .css 文件和一个 .js 文件。
奇怪的是，在 css 中使用百分比值定位的元素周围出现了一个设计缺陷。为了查看我是否在移动时修改了样式，我替换了 style 标签(省略了 link 标签)并且它工作正常。来来回回几次，我了解到只有在我使用 link 标签而不是通过 style 标签嵌入它时才会严格发生。
我想使用 link 标签，所以我试图缩小问题范围。经过一段时间的摆弄，我将其追溯到 .js 文件，特别是 $(document).ready 上的 .focus 函数的用法。如果我注释掉 .focus，一切正常。取消注释，它就会中断。
这似乎只发生在 Chrome 中。它不会出现在 FF26 或 IE11 中。
例子
请注意，该问题仅出现在 Chrome 中，并且必须禁用缓存。由于 Chrome 的临时缓存禁用不会扩展到 iframe 的 iframe，direct result更易于使用。
最佳答案
jQuery 在 .load() 方法完成并且 DOM 已更新时提供回调函数。这是您想要对从外部 url 插入的元素进行操作的地方。
<script>
$(document).ready(function() {
$('#content').load('html/portal.html', function() {
//now i can operate on elements loaded from html/portal.html
//they have been inserted into the DOM
$('input#input').focus();
})
});
</script>
就链接元素的引用而言，如果您想使用 javascript 从外部 url 动态加载样式表，您可以使用类似这样的 javascript 函数:
//load deferred stylesheets
function loadStyleSheet(src) {
if (document.createStyleSheet) {
document.createStyleSheet(src);
} else {
$("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
}
}
如果你想加载一个外部 javascript 文件你可以使用 jQuery.getScript():
jQuery.getScript('/js/external.js');
综上所述，如果您想从外部资源加载一些内容，将其插入 DOM 并加载外部样式表和外部 javascript 资源，您可以按如下方式进行:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
//function to load a deferred stylesheets
var loadStyleSheet = function(src) {
if (document.createStyleSheet) {
document.createStyleSheet(src);
} else {
$("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
}
}
$('#someWrapper').load('external-url.html #someWrapper > *', function() {
loadStyleSheet('/css/external.css');
jQuery.getScript('/js/external.js');
})
});
</script>
</head>
<body>
<div id="someWrapper">
<!-- external content is loaded here -->
</div>
</body>
</html>
关于javascript - jQuery.load()、jQuery.focus() 和链接标记之间的冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21104018/