1

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

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

什么工作： - 获取目标页面的#content div并将其加载到当前页面 - 使用历史API显示一个新的url和popstate事件返回到以前的状态 - 从当前更改html头的内容文档

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

应该有一个简单的功能，对吧？或者一个好的方法来做到这一点？

4

2 回答 2

1

由于它位于同一来源，因此您可以这样做。这有点尴尬，尽管当你使用它的 ajax 时，它与 jQuery 在幕后所做的事情相差一百万英里load（我希望 jQuery 使用一个文档片段而不是一个iframe.

基本上，您可以创建一个 off-page 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;

实例| 来源

于 2013-03-12T15:31:31.970 回答
0

在接受的答案下查看我的评论。基本上，使用该方法存在一些性能问题，这使我寻找更好的方法。为此，我采用了在 rails turbolinks 项目中发现的一种方法，该方法是麻省理工学院许可和编写的咖啡脚本。归功于他们解决了一些浏览器兼容性问题。

https://github.com/rails/turbolinks

/*
 * A function that takes a string of HTML and returns a document object.
 */
var parseDocument = (function() {
    function createDocumentUsingParser(html) {
        return (new DOMParser()).parseFromString(html, 'text/html');
    }
    function createDocumentUsingDOM(html) {
        var doc = document.implementation.createHTMLDocument('');
        doc.documentElement.innerHTML = html;
        return doc;
    }
    function createDocumentUsingWrite(html) {
        var doc = document.implementation.createHTMLDocument('');
        doc.open('replace');
        doc.write(html);
        doc.close();
        return doc;
    }
    /*
     * Use createDocumentUsingParser if DOMParser is defined and natively
     * supports 'text/html' parsing (Firefox 12+, IE 10)
     * 
     * Use createDocumentUsingDOM if createDocumentUsingParser throws an exception
     * due to unsupported type 'text/html' (Firefox < 12, Opera)
     * 
     * Use createDocumentUsingWrite if:
     *  - DOMParser isn't defined
     *  - createDocumentUsingParser returns null due to unsupported type 'text/html' (Chrome, Safari)
     *  - createDocumentUsingDOM doesn't create a valid HTML document (safeguarding against potential edge cases)
     */
    var parser;
    if (window.DOMParser) {
        try {
            var testDoc = createDocumentUsingParser('<html><body><p>test');
            if (testDoc && testDoc.body && testDoc.body.childNodes.length === 1) {
                parser = createDocumentUsingParser;
            }
        } catch(ex) {
            parser = createDocumentUsingDOM;
        }
    }
    if (!parser) {
        parser = createDocumentUsingWrite;
    }
    return parser;
})();

然后大概例如您可以执行以下操作：

var doc = parseDocument(wadOfHtml);
var title = doc.title;
var $content = $(doc).find('#content');

请注意，我尚未亲自验证此代码是否有效，我将失去 rails 项目的声誉。我也没有验证我对coffeescript 的改编是否没有引入语法或其他错误。我什至还没有运行它。我只是乐观。

于 2013-04-29T23:24:47.730 回答