如何使用 jquery 将整个 html 页面放在 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8155932/
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
How to put a whole html page in a div using jquery?
提问by NinjaBoy
First of all I want everyone to know that I am absolute beginner so please be patient with me.
首先我想让大家知道我是绝对的初学者，所以请耐心等待。
I want to know how am I going to put the entire html page in a div. I tried $("#footballPlayers").html("footballplayers.html");but it displays footballplayers.htmltext instead of the whole page.
我想知道如何将整个 html 页面放在一个 div 中。我试过了，$("#footballPlayers").html("footballplayers.html");但它显示的是footballplayers.html文本而不是整个页面。
index.html:
索引.html：
<html>
<head>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript">
$(function(){
$("div#tabFootballPlayers").click(function(){
$("#footballPlayers").html("footballplayers.html");
$("#actionStars").html("");
$("#directors").html("");
});
});
$(function(){
$("div#tabActionStars").click(function(){
$("#actionStars").html("actionstars.html");
$("#footballPlayers").html("");
$("#directors").html("");
});
});
$(function(){
$("div#tabDirectors").click(function(){
$("#directors").html("directors.html");
$("#actionStars").html("");
$("#footballPlayers").html("");
});
});
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div>
<div id="tabFootballPlayers">Football Players</div>
<div id="footballPlayers"> </div>
<div id="tabActionStars">Action Stars</div>
<div id="actionStars"> </div>
<div id="tabDirectors">Directors</div>
<div id="directors"> </div>
</div>
</body>
</html>
回答by Blender
You use the .load()function:
您使用该.load()功能：
$("#footballPlayers").load('footballplayers.html body');
Notice the selector after the URL. You can select elements from that page. I think you need the body, as having nested <html>tags could end badly.
注意 URL 后面的选择器。您可以从该页面中选择元素。我认为你需要body，因为嵌套<html>标签可能会很糟糕。
A few more comments about your code:
关于您的代码的更多评论：
You don't use this function more than once. Just shove all of your code into it:
您不会多次使用此功能。只需将所有代码都放入其中：
$(function() {
// All of your code here.
});
I prefer this syntax, as it looks more functional and shows you what it does:
我更喜欢这种语法，因为它看起来更实用，并向您展示了它的作用：
$(document).ready(function() {
// All of your code here.
});
Also, your code is really redundant. Try condensing it:
另外，你的代码真的是多余的。尝试压缩它：
$(document).ready(function() {
$("#your_menu_container div").click(function() {
$(this).load(this.id.substr(3).toLowerCase() + '.html').siblings().html('');
});
});
回答by Hitu Bansal
use load
使用负荷
jQuery("#footballPlayers").load("footballplayers.html");
for more details click here
欲了解更多详情，请点击此处
回答by James Johnson
You can use loadfor this:
您可以load为此使用：
$("#div1").load("myhtmlpage.htm");
回答by Manse
replace
代替
$("#directors").html("directors.html");
with
和
$("#directors").load("directors.html");
the html file that you load should only contain the contents of the DIV - ie not the <head>the <body>or even the navigation - just the content
html文件，你应该加载仅包含DIV的内容-即没有<head>的<body>，甚至导航-只是内容
回答by Naftali aka Neal
TRY:
尝试：
$("#footballPlayers").load("footballplayers.html");
回答by Rocket Hazmat
You need to actually load the contents of footballplayers.htmlusing AJAX, and then put that in the div.
您需要实际加载footballplayers.html使用 AJAX的内容，然后将其放入 div 中。
Try this:
尝试这个：
$("#footballPlayers").load("footballplayers.html");
.loaduses AJAX to get the page, then loads it into the div.
.load使用 AJAX 获取页面，然后将其加载到 div 中。
回答by Irvin Dominin
using your code you fill the html code with a constant string "footballplayer.html".
使用您的代码，您可以使用常量字符串“footballplayer.html”填充 html 代码。
You can use the load method, here is an example:
您可以使用 load 方法，这是一个示例：
$('#footballPlayers').load('footballplayers.html');
it get via AJAX the page you request and fill the element.
它通过 AJAX 获取您请求的页面并填充元素。
回答by daCoda
I'm on the loadtrain:
我在load火车上：
$("#div1").load("myhtmlpage.htm");
