Javascript 使用 jQuery 将 HTML 页面动态加载到 div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735762/
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
Load HTML page dynamically into div with jQuery
提问by Saeed Hashemi
I'm trying to make it so when I click on a link in a HTML page, it dynamically loads the requested page into a div with jQuery.
我正在尝试这样做，当我单击 HTML 页面中的链接时，它会使用 jQuery 将请求的页面动态加载到 div 中。
How can I do that?
我怎样才能做到这一点？
<html>
<head>
<script type="text/javascript">
// what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>
<a href="page1.html">Page 1</a><br />
<a href="page2.html">Page 2</a><br />
<a href="page3.html">Page 3</a><br />
<a href="page4.html">Page 4</a><br />
<a href="page5.html">Page 5</a><br />
<a href="page6.html">Page 6</a><br />
</body>
</html>
采纳答案by hexacyanide
There's a jQuery plugin out there called pjaxit states: "It's ajax with real permalinks, page titles, and a working back button that fully degrades."
有一个名为pjax的 jQuery 插件，它指出：“它是带有真正永久链接、页面标题和完全降级的工作后退按钮的 ajax。”
The plugin uses HTML5 pushState and AJAX to dynamically change pages without a full load. If pushState isn't supported, PJAX performs a full page load, ensuring backwards compatibility.
该插件使用 HTML5 pushState 和 AJAX 来动态更改页面而无需满载。如果不支持 pushState，PJAX 会执行整页加载，确保向后兼容。
What pjax does is that it listens on specified page elements such as <a>. Then when the <a href=""></a>element is invoked, the target page is fetched with either the X-PJAXheader, or a specified fragment.
pjax 的作用是侦听指定的页面元素，例如<a>. 然后当<a href=""></a>元素被调用时，目标页面会被获取到X-PJAX标题或指定的片段。
Example:
例子：
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
Putting this code in the page header will listen on all links in the document and set the element that you are both fetching from the new page and replacing on the current page.
将此代码放在页眉中将侦听文档中的所有链接，并设置您从新页面获取并在当前页面上替换的元素。
(meaning you want to replace #pjax-containeron the current page with #pjax-containerfrom the remote page)
（意思是你想#pjax-container用#pjax-container远程页面替换当前页面）
When <a>is invoked, it will fetch the link with the request header X-PJAXand will look for the contents of #pjax-containerin the result. If the result is #pjax-container, the container on the current page will be replaced with the new result.
当<a>被调用时，它将获取带有请求头的链接，X-PJAX并#pjax-container在结果中查找 的内容。如果结果为#pjax-container，则当前页面上的容器将替换为新结果。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to <a href="/page2">next page</a>.
</div>
</body>
</html>
If #pjax-containeris not the first element found in the response, PJAX will not recognize the content and perform a full page load on the requested link. To fix this, the server backend code would need to be set to only send #pjax-container.
如果#pjax-container不是响应中找到的第一个元素，PJAX 将无法识别内容并在请求的链接上执行完整页面加载。要解决此问题，需要将服务器后端代码设置为仅发送#pjax-container。
Example server side code of page2:
示例服务器端代码page2：
//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
Go to <a href="/page1">next page</a>.
</div>
//else send full page
If you can't change server-side code, then the fragment option is an alternative.
如果您无法更改服务器端代码，则片段选项是一种替代方法。
$(document).pjax('a', '#pjax-container', {
fragment: '#pjax-container'
});
Note that fragmentis an older pjax option and appears to fetch the child element of requested element.
请注意，这fragment是一个较旧的 pjax 选项，似乎获取请求元素的子元素。
回答by user957863
JQuery load works, but it will strip out javascript and other elements from the source page. This makes sense because you might not want to introduce bad script on your page. I think this is a limitation and since you are doing a whole page and not just a div on the source page, you might not want to use it. (I am not sure about css, but I think it would also get stripped)
JQuery 加载有效，但它会从源页面中删除 javascript 和其他元素。这是有道理的，因为您可能不想在页面上引入不良脚本。我认为这是一个限制，因为你在做一个完整的页面，而不仅仅是源页面上的一个 div，你可能不想使用它。（我不确定 css，但我认为它也会被剥离）
In this example, if you put a tag around the body of your source page, it will grab anything in between the tags and won't strip anything out. I wrap my source page with and .
在此示例中，如果您在源页面的正文周围放置一个标签，它将抓取标签之间的任何内容，而不会删除任何内容。我用 和 包装我的源页面。
This solution will grab everything between the above delimiters. I feel it is a much more robust solution than a simple load.
此解决方案将获取上述分隔符之间的所有内容。我觉得这是一个比简单负载更强大的解决方案。
var content = $('.contentDiv');
content.load(urlAddress, function (response, status, xhr) {
var fullPageTextAsString = response;
var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart />"), fullPageTextAsString.indexOf("<jqueryloadmarkerend />"));
content.html(pageTextBetweenDelimiters);
});
回答by Jai
Try with this one:
试试这个：
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
and make sure to call this library first:
并确保首先调用这个库：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
回答by Simcha Khabinsky
I think this would do it:
我认为这会做到：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
</script>
</head>
<body>
<iframe id="content"></iframe>
<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>
By the way if you can avoid Jquery, you can just use the targetattribute of <a>element:
顺便说一句，如果你可以避免 Jquery，你可以只使用元素的target属性<a>：
<html>
<body>
<iframe id="content" name="content"></iframe>
<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html>
回答by nathan hayfield
I think you are looking for the Jquery Loadfunction. You would just use that function with an onclick function tied to the a tag or a button if you like.
我认为您正在寻找Jquery 加载功能。如果您愿意，您只需将该函数与绑定到 a 标签或按钮的 onclick 函数一起使用。
回答by B. Clay Shannon
You can use jQuery's getJSON() or Load(); with the latter, you can reference an existing html file. For more details, see http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a
您可以使用 jQuery 的 getJSON() 或 Load()；对于后者，您可以引用现有的 html 文件。有关更多详细信息，请参阅http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a
回答by sn ps
You can through option
您可以通过选项
Try this with some modifications
尝试进行一些修改
<div trbidi="on">
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == '')
{contenedor.innerHTML = '';
} else{
var url = idYouTube;
contenedor.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ url +'" frameborder="0" allowfullscreen></iframe>';
}
}
</script>
<select onchange="MostrarVideo(this.value);">
<option selected disabled>please selected </option>
<option value="qycqF1CWcXg">test1</option>
<option value="hniPHaBgvWk">test2</option>
<option value="bOQA33VNo7w">test3</option>
</select>
<div id="divInnerVideo">
</div>
If you want to put a default page placed inside id="divInnerVideo"
如果你想把一个默认页面放在id="divInnerVideo"里面
example:
例子：
<div id="divInnerVideo">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
