javascript - 使用 jquery/javascript 从卸载的文档中加载 html 头

Question

我正在为我父亲的驾驶学校重写一个网站，将不必要的 iframe 和图像更改为 html5 和 css3 标记，并通过 javascript 和 jquery 改进功能。

现在，我为每个菜单项(对于搜索爬虫)都有一个完整的页面，而标题和菜单大部分保持不变。这就是为什么我想使用历史 API 并在启用了 JavaScript 的设备上单击链接时更改内容以及文档标题和描述，这样就不必刷新整个页面。

什么有效: - 获取目标页面的#content div并加载到当前页面 - 使用history api显示新的url并使用popstate事件返回之前的状态 - 更改当前文档的 html 头部内容

什么不起作用: - 从目标文档获取html头

应该有一个简单的函数来实现这个，对吧？或者有什么好的方法吗？

Answer 1

由于它们具有相同的起源，因此您可以做到这一点。这有点尴尬，尽管它与 jQuery 在使用 ajax 时在幕后所做的事情相差不到一百万英里 load (我希望 jQuery 使用文档片段而不是 iframe )。

基本上，您可以创建一个页外 iframe ，将内容页面加载到那里，然后从中提取您需要的任何内容，如下所示(完全未优化):

// I'm assuming you have a variable containing the content URL; I'll use `page`
var page = "/ocazuc/2";

// Create the iframe, put it off-page, and put it in the DOM
var iframe = $('<iframe>');
iframe.css({
  position: "absolute",
  left: -10000
}).appendTo(document.body);

// Hook the load event on it
iframe.load(function() {
  // Get the document
  var $doc = $(iframe[0].contentDocument.documentElement);

  // Steal its content
  $doc.find("body").contents().appendTo(document.body);

  // And use its title or whatever else you want from the `head`
  document.title = $doc.find('title').text();

  // Done with it
  iframe.remove();
});

// Start loading it
iframe[0].src = page;

Live Example | Source