使用jQuery将HTML网页动态加载到div [英] Load HTML page dynamically into div with jQuery
问题描述
我试图让它在HTML页面中点击链接时，它会动态加载请求的页面到一个div与jQuery。我可以这样做吗？
< html>
< head>
< script type =text / javascript>
//我可以做什么加载任何url点击？
< / script>
< / head>
< body>
< div id =content>< / div>
< a href =page1.html>第1页< / a>< br />
< a href =page2.html> Page 2< / a>< br />
< a href =page3.html> Page 3< / a>< br />
< a href =page4.html>第4页< / a>< br />
< a href =page5.html> Page 5< / a>< br />
< a href =page6.html> Page 6< / a>< br />
< / body>
< / html>
有一个jQuery插件， https://github.com/defunkt/jquery-pjax\">pjax 它说：这是一个真正的固定链接，页面标题和一个后退按钮完全降级。
插件使用HTML5 pushState和AJAX来动态地更改页面而不是满载。如果不支持pushState，PJAX会执行一个完整的页面加载，以确保向后兼容性。
pjax的作用是监听指定的页面元素，例如< a> 。然后当调用 元素时，使用 X- PJAX 标头或指定的片段。
示例：
< script type =text / javascript>
$（document）.pjax（'a'，'＃pjax-container'）;
< / script>
将此代码放在页眉中会监听文档中的所有链接，并设置元素
（这意味着您要替换＃pjax-container 在当前页面上用＃pjax-container 从远程页面）
当< a> 被调用时，它将获取请求头 X-PJAX 的链接，并将查找＃pjax-container 。如果结果为＃pjax-container ，则当前页面上的容器将替换为新结果。
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =jquery.min.js>< / script>
< script type =text / javascriptsrc =jquery.pjax.js>< / script>
< script type =text / javascript>
$（document）.pjax（'a'，'＃pjax-container'）;
< / script>
< / head>
< body>
< h1>我的网站< / h1>
< div class =containerid =pjax-container>
转到< a href =/ page2>下一页< / a> ;.
< / div>
< / body>
< / html>
如果＃pjax-container 在响应中找到第一个元素，PJAX将不会识别内容并对请求的链接执行完整页面加载。要解决此问题，服务器后端代码需要设置为仅发送＃pjax-container 。
示例服务器端代码 page2 ：
// if header X-PJAX == true in request headers，send
< div class =containerid =pjax-container>
转到< a href =/ page1>下一页< / a> ;.
< / div>
// else send full page
如果无法更改服务器端代码，那么fragment选项是另一种选择。
$（document）.pjax（'a'，'＃pjax-container' {
fragment：'＃pjax-container'
}）;
请注意， fragment 是较旧的pjax选项并显示为获取所请求元素的子元素。
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.
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>
There's a jQuery plugin out there called pjax it states: "It's ajax with real permalinks, page titles, and a working back button that fully degrades."
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.
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-PJAX header, or a specified fragment.
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-container on the current page with #pjax-container from the remote page)
When <a> is invoked, it will fetch the link with the request header X-PJAX and will look for the contents of #pjax-container in the result. If the result is #pjax-container, the container on the current page will be replaced with the new result.
<!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-container is 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.
Example server side code of 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 fragment is an older pjax option and appears to fetch the child element of requested element.
这篇关于使用jQuery将HTML网页动态加载到div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
