Question

tl; dr summary ：jQuery的load()方法称为：

$('#foo').load('similar.html #foo')

导致DOM结构：

<div id="foo">
  <div id="foo">…</div>
</div>

使用不会使包装器加倍的jQuery将页面的一部分替换为类似页面中的等效部分的正确方法是什么？

我想创建一个网站：

在所有网页（标题，导航侧边栏，搜索框等）周围都有一致的网站“chrome”。
在导航期间交换网站的“内容”（所有Chrome都是持久的）。
提供标准浏览的历史和书签体验。

enter image description here

我不想使用＃3引起的帧，也因为我希望持久内容与动态内容重叠（请注意粉红色的持久搜索结果覆盖内容）。

因此，网站中的每个页面都具有类似于以下缩写shell的结构：

<html><head><title>NAME</title>…</head><body>
  <div id="chrome">…</div>
  <div id="content">…</div>
</body></html>

使用jQuery我可以拦截导航和搜索链接，并使用AJAX加载页面并仅替换内容。我可以使用history.pushState()以可导航和可收藏的方式更新地址栏：

$('#nav a').click(function(e){
  var url = this.href;
  $('#content').load(url+" #content",function(html){
    var title = /<title>(.+?)<\/title>/i.exec(html)[1];
    history.pushState({},title,url);
    $('title').html(title);
  });
  e.preventDefault();
});

需要额外的代码来正确处理历史中的前进和后退;这些与这个问题无关。

但是，上面的代码导致DOM具有：

<div id="content">
  <div id="content">contents from other page</div>
</div>

除了将所有标记更改为...之外，是否有更好的方法防止id 的非法加倍？

<div id="content-wrap"><div id="content">…</div></div>

和JS到......

$('#content-wrap').load(url+" #content",…);

Answer 1

您可以使用.load()请求并过滤服务器响应，而不是使用.html()自动将服务器响应加载到所选元素中（使用$.get()）。 {1}}回复：

innerHTML

以下是演示：http://jsfiddle.net/QRBaw/

您还可以使用$.get('similar.html', function (serverResponse) { var filter = $(serverResponse).filter('#foo').html(); $('#foo').html(filter); });选择.children().parent()元素，而不是使用#foo（如果您想动态执行此操作）。

<强> UN-TESTED

您是否尝试更改.filter()函数调用中的选择器以选择.load()元素的子元素？

#foo

使用jQuery load（）和pushState（）模拟框架

1 个答案: