jQuery.load 加载 HTML 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16755426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery.load to load HTML file
提问by Bentley Carr
I've neverused jQuerybefore this, but I'll explain what I'm trying to do.
在此之前我从未使用过jQuery，但我会解释我想要做什么。
index.html
索引.html
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<!-- <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
<!-- This is my problem -->
<script>
$('#navbar').load('./navbar.html');
</script>
<noscript>
<h1>Please enable Javascript!</h1>
</noscript>
<div id="container">
<!-- Content Here -->
</div>
</body>
</html>
navbar.html
导航栏.html
<div id="navbar">
<li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
<li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li>
<li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li>
<li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li>
</div>
So what I'm trying to do here, is have many HTML pages which all linkto one navbar html page, so when I change the navbar.html, I dont have to change every page.
所以我在这里尝试做的是有许多 HTML 页面，它们都链接到一个导航栏 html 页面，所以当我更改 navbar.html 时，我不必更改每个页面。
I already have another question here. Davor Milnaricsuggested "if you are using jquery, you can try with '.load()' function. api.jquery.com/load" but I can't get it to work. What am I doing wrong? How do I fix it? Any help would be much appreciated.
我已经有另一个问题了。Davor Milnaric建议“如果您正在使用 jquery，您可以尝试使用 '.load()' 函数。api.jquery.com/load”但我无法让它工作。我究竟做错了什么？我如何解决它？任何帮助将非常感激。
回答by Yotam Omer
You need to do 2 things:
你需要做两件事：
Use $(document).ready() - read here; All jQuery code must be wrapped like this:
$(document).ready(function(){ //jquery code goes here.... });Change
$('#navbar').load('./navbar.html');
使用 $(document).ready() -在这里阅读；所有 jQuery 代码都必须这样包装：
$(document).ready(function(){ //jquery code goes here.... });改变
$('#navbar').load('./navbar.html');
to
到
$('#container').load('./navbar.html');
.. you don't have an element with id="navbar" and according to this:
.. 你没有一个带有 id="navbar" 的元素，根据这个：
If no element is matched by the selector — in this case, if the document does not contain an element with id="result" (in our case "navbar") — the Ajax request will not be sent.
如果没有与选择器匹配的元素——在这种情况下，如果文档不包含带有 id="result" 的元素（在我们的例子中是 "navbar"）——Ajax 请求将不会被发送。
回答by eklhad
It's also possible that you need to wait for the DOM to load.
您也可能需要等待 DOM 加载。
<script>
$(document).ready(function() {
$('#result').load('navbar.html #navbar', function() {
alert("loaded");
});
});
</script>
<div id="result">
</div>
