从jquery/javascript下载卸载文档加载html头文件

问题描述：

我正在为我父亲的驾驶学校重写网站，将不必要的iframe和图像更改为html5和css3标记，并通过javascript和jquery改进了功能。从jquery/javascript下载卸载文档加载html头文件

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

什么工作： - 让目标页面的＃内容股利和它加载到当前页面 - 使用历史API展现出新的URL和popstate事件返回到以前的状态 - 修改内容从当前文档

html的头什么行不通的： - 从目标文件获得HTML头

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

当您使用jQuery将它解析为html时，内容中省略了诸如'

'，''和''等标记。我建议改为定位特定标签，或者先将其解析为字符串，以便仅获取'' – 2013-03-12 14:53:09

之间的内容代码，代码，为什么代码？ – 2013-03-12 14:53:09

你需要从'

'哪些内容？我假设你想要点击，所以你可以得到每个页面的'''' document.title' – 2013-03-12 14:55:56

答

既然它是在同一个原点，你可以做到这一点。这有点尴尬，尽管它与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

谢谢，我要看看这是否有效！ – Gi11i4m 2013-03-18 16:38:52

这可能不会比整页刷新更高效，因为您仍然在完成整个页面刷新过程中涉及很多事情，例如，设置一个全新的窗口环境和JS范围，获取和解析JS，CSS，图像，视频，其他iframe等。理想情况下，您希望将内容作为惰性，分离的DOM元素提取。 – greim 2013-04-29 19:17:22

答

在接受的答案下查看我的意见。基本上，使用这种方法有一些性能问题，这使我寻找更好的方法。为此，我调整了麻省理工学院许可和书面咖啡脚本的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');

被警告，我没有验证为自己的代码是否正确，我要脱铁轨项目的信誉。我还没有验证我的咖啡改编是否没有引入语法或其他错误。我从字面上甚至还没有运行它;我只是乐观。

从jquery/javascript下载卸载文档加载html头文件

相关推荐