Sae*_*emi 15 html javascript css jquery
我试图这样做,当我点击HTML页面中的链接时,它会动态地将请求的页面加载到带有jQuery的div中.
我怎样才能做到这一点？
<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>
hex*_*ide 14
有一个名为pjax的jQuery插件,它说:"它是真正的固定链接,页面标题和完全降级的工作后退按钮的ajax."
该插件使用HTML5 pushState和AJAX动态更改页面而无需满载.如果不支持pushState,则PJAX执行整页加载,确保向后兼容.
pjax的作用是它侦听指定的页面元素,如<a>.然后,在<a href=""></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/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>
如果#pjax-container不是响应中找到的第一个元素,PJAX将无法识别内容并在请求的链接上执行整页加载.要解决此问题,需要将服务器后端代码设置为仅发送#pjax-container.
示例服务器端代码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
如果无法更改服务器端代码,则可以选择片段选项.
$(document).pjax('a', '#pjax-container', {
fragment: '#pjax-container'
});
请注意,这fragment是一个较旧的pjax选项,似乎是获取所请求元素的子元素.
JQuery加载工作,但它将从源页面中删除javascript和其他元素.这是有道理的,因为您可能不想在页面上引入错误的脚本.我认为这是一个限制因为你在整个页面而不仅仅是源页面上的div,你可能不想使用它.(我不确定css,但我认为它也会被剥夺)
在此示例中,如果您在源页面的主体周围放置一个标记,它将在标记之间抓取任何内容,并且不会删除任何内容.我用和包装我的源页面.
此解决方案将获取上述分隔符之间的所有内容.我觉得它比简单的负载更强大.
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);
});
试试这个:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
并确保首先调用此库:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
我认为这样做会:
<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>
顺便说一句,如果你可以避免使用Jquery,你可以使用element 的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>