Question

我有一个网站，我不想将外部html内容加载到我的index.html <div id="content">而无需刷新页面。我设法用jQuery load（）函数做到这一点。当我在load()和ajax()上阅读时，我的理解是ajax是一个更可配置的函数然后加载，但基本上做同样的事情（纠正我，如果我错了*）。当我使用load（）时，外部内容会加载但url地址不会显示当前页面。因此，我想问一下那里的人是否可以告诉我如何：

使ajax（）函数的行为类似于load（）。
动态显示并在网址中获取href以获取书签等。

Ajax（）代码示例： https://plnkr.co/edit/ReSdd5U6dOYbQxctzvk7?p=preview

Load（）代码示例： https://plnkr.co/edit/gpsZbOip0VtO7iXTPaM2?p=preview

有问题吗？问！

事先谢谢！

/ E

Answer 1

据我了解，您希望使用jQuery load（）或等效的 AND 让浏览器历史记录（地址栏）更新以反映该网址的网址刚加载的内容。

由于您建议您加载（）正常工作，那么您所使用的是浏览器 History_API ，特别是 pushState（）。

您可以详细了解：History_API

您还可以阅读：pushState() method

根据您的 load（）示例，我认为您可以使用以下内容对其进行扩展，以获取您的目标：

$('#content').load('link1.html');
$('a').click(function(e){
  var page = $(this).attr('href');
  $('#content').load(page + '.html');

  var stateObj = {loaded : page};
  history.pushState(stateObj, "page title", page + '.html');

  return false; // don't follow the link
});

您还可以看到Mozilla的AJAX based navigation example通过AJAX而不是jQuery执行我认为您要做的事情并使用pushstate。

Answer 2

您可以执行以下操作：

$('#btn1').click(function(e){
   var href = this.href;  // get href from link

   $.ajax({
       url: href,
       type: 'GET',
       dataType: 'html',
       success: function(data){
         $('#content').html(data);
       }
   });

   return false; // don't follow the link

}）;

Answer 3

这些选项/功能都不会更新浏览器显示的网址......他们只是加载并显示您请求的网页内容。

出于历史目的，您可以做的是使用原生＆＃34;历史API＆＃34;正如here所述，但仍然没有网址更新......

jQuery / Ajax将外部页面加载到内容div

3 个答案: