Javascript 在jQuery对象中加载整个html（带doctype）|防止iFrame加载脚本_Javascript_Jquery_Html_Ajax

Javascript 在jQuery对象中加载整个html（带doctype）|防止iFrame加载脚本

javascript jquery html ajax

Javascript 在jQuery对象中加载整个html（带doctype）|防止iFrame加载脚本,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我试图通过AJAX加载整个HTML，然后用jQuery操作DOM。这意味着检索到的HTML包含doctype和其他顶级元素获取HTML很容易： $.get('/my/url', function(html) { //full html loaded. }); 但这里有一个棘手的部分：如果您在jQuery对象（如var$obj=$（html））中简单地加载html，它将不起作用。许多信息将被剥离，因为它会像您输入的那样加载它：（注意doubledoctype）这是可行的，因为$html现

我试图通过

AJAX

加载整个

HTML

，然后用

jQuery

操作

DOM

。这意味着检索到的

HTML

包含

doctype

和其他顶级元素

获取

HTML

很容易：

$.get('/my/url', function(html) {
  //full html loaded.
});

但这里有一个棘手的部分：如果您在

jQuery

对象（如var

$obj=$（html）

）中简单地加载

html

，它将不起作用。许多信息将被剥离，因为它会像您输入的那样加载它：（注意double

doctype

）

这是可行的，因为

$html

现在拥有完整的

DOM

，包括标题和标题。但由于我基本上是在一个

iframe

中加载整个

HTML

，浏览器将开始解析它，并加载所有

javascript

，

样式表

，

图像

，等等。首先失去了加载

ajax

的功能，以防止加载我已经拥有的内容。（是的，我知道缓存，但这不是我想要的）

为了防止加载，我尝试在

iframe

上启用

sandbox

，但这也会禁用从托管处理所有这些问题的

脚本的静态域对其的访问
所以问题是：如何在jQuery对象中加载整个HTML
，而不加载HTML
中所有引用的脚本和图像，而不是iframe，您可以尝试将整个第二个文档作为文本加载，然后将其输入到新的DOMParser中
这样您就可以访问文档的所有部分（头部、身体、你拥有的东西）
（不确定是否需要使用document.importNode
，然后让节点正确导入到主文档中，这可能取决于具体使用的方法。）
可以尝试将整个第二个文档作为文本加载，然后将其输入到新的DOMParser，而不是iframe
这样您就可以访问文档的所有部分（头部、身体、你拥有的东西）
（不确定是否需要使用document.importNode
，然后让节点正确导入到主文档中，这可能取决于您使用的具体方法。）
工作解决方案得益于@CBroe：
function loadDom(html)  {
  if (typeof window.DOMParser != "undefined") {
      var dom = new window.DOMParser().parseFromString(html, "text/html");
      if (dom) {
        var $html = $(dom);
        console.log('dom loaded');
        handlePageObject($html);
        return;
      }
  }

  /*
  create iframe to store the received html
  since the HTML is an entire page including doctype and <html> we can not use it directly in a jquery object
  */
  var iframe = document.createElement('iframe');
  document.getElementsByTagName('body')[0].appendChild(iframe);
  iframe.onload= function() {
    console.log('loaded from iFrame');
    var doc = iframe.contentWindow.document;
    var $html = $(doc);
    iframe.remove();
    handlePageObject($html);
    return;
  };
  iframe.contentWindow.document.open();
  iframe.contentWindow.document.write(html);
  iframe.contentWindow.document.close();
}

function handlePageObject($html) {
  //do something with entire html as jquery object
  var title = $html.find('title').html();
  console.log(title);
}

函数loadDom（html）{
if（typeof window.DOMParser！=“未定义”）{
var dom=new window.DOMParser（）.parseFromString（html，“text/html”）；
if（dom）{
var$html=$（dom）；
log（'dom-loaded'）；
handlePageObject（$html）；
返回；
}
}
/*
创建iframe以存储收到的html
因为HTML是包含doctype的整个页面，我们不能在jquery对象中直接使用它
*/
var iframe=document.createElement（'iframe'）；
document.getElementsByTagName（'body'）[0].appendChild（iframe）；
iframe.onload=函数（）{
log（'从iFrame加载'）；
var doc=iframe.contentWindow.document；
var$html=$（doc）；
iframe.remove（）；
handlePageObject（$html）；
返回；
};
iframe.contentWindow.document.open（）；
iframe.contentWindow.document.write（html）；
iframe.contentWindow.document.close（）；
}
函数handlePageObject（$html）{
//将整个html作为jquery对象进行处理
var title=$html.find（'title'）.html（）；
控制台日志（标题）；
}
工作解决方案感谢@CBroe：
function loadDom(html)  {
  if (typeof window.DOMParser != "undefined") {
      var dom = new window.DOMParser().parseFromString(html, "text/html");
      if (dom) {
        var $html = $(dom);
        console.log('dom loaded');
        handlePageObject($html);
        return;
      }
  }

  /*
  create iframe to store the received html
  since the HTML is an entire page including doctype and <html> we can not use it directly in a jquery object
  */
  var iframe = document.createElement('iframe');
  document.getElementsByTagName('body')[0].appendChild(iframe);
  iframe.onload= function() {
    console.log('loaded from iFrame');
    var doc = iframe.contentWindow.document;
    var $html = $(doc);
    iframe.remove();
    handlePageObject($html);
    return;
  };
  iframe.contentWindow.document.open();
  iframe.contentWindow.document.write(html);
  iframe.contentWindow.document.close();
}

function handlePageObject($html) {
  //do something with entire html as jquery object
  var title = $html.find('title').html();
  console.log(title);
}

函数loadDom（html）{
if（typeof window.DOMParser！=“未定义”）{
var dom=new window.DOMParser（）.parseFromString（html，“text/html”）；
if（dom）{
var$html=$（dom）；
log（'dom-loaded'）；
handlePageObject（$html）；
返回；
}
}
/*
创建iframe以存储收到的html
因为HTML是包含doctype的整个页面，我们不能在jquery对象中直接使用它
*/
var iframe=document.createElement（'iframe'）；
document.getElementsByTagName（'body'）[0].appendChild（iframe）；
iframe.onload=函数（）{
log（'从iFrame加载'）；
var doc=iframe.contentWindow.document；
var$html=$（doc）；
iframe.remove（）；
handlePageObject（$html）；
返回；
};
iframe.contentWindow.document.open（）；
iframe.contentWindow.document.write（html）；
iframe.contentWindow.document.close（）；
}
函数handlePageObject（$html）{
//将整个html作为jquery对象进行处理
var title=$html.find（'title'）.html（）；
控制台日志（标题）；
}
因此，基本上您正在尝试在没有页面加载的情况下实现页面转换。
这正是你需要的
自述：
它允许您完全改变标准网站（服务器端生成或静态网站）的用户体验，让他们感觉自己在浏览应用程序。特别是对于低带宽连接的用户
不再重新加载整页。没有更多的HTTP请求
还有一个，但现在已经不推荐了。库是您唯一需要的东西。因此，基本上您正在尝试在没有页面加载的情况下实现页面转换。
这正是你需要的
自述：
它允许您完全改变标准网站（服务器端生成或静态网站）的用户体验，让他们感觉自己在浏览应用程序。特别是对于低带宽连接的用户
不再重新加载整页。没有更多的HTTP请求
还有一个，但现在已经不推荐了。库是您唯一需要的东西。
您是否尝试过不将iframe附加到当前文档？@CBroe:是的，如果您使用可以针对body标记或其他内容的方法，那么您将获得无法读取null属性“document”；只需在加载url后放置空格和jQuery选择器，如$（selectorYouLoadTo.load（'url.php body'）。记住，你只能用h
function loadDom(html)  {
  if (typeof window.DOMParser != "undefined") {
      var dom = new window.DOMParser().parseFromString(html, "text/html");
      if (dom) {
        var $html = $(dom);
        console.log('dom loaded');
        handlePageObject($html);
        return;
      }
  }

  /*
  create iframe to store the received html
  since the HTML is an entire page including doctype and <html> we can not use it directly in a jquery object
  */
  var iframe = document.createElement('iframe');
  document.getElementsByTagName('body')[0].appendChild(iframe);
  iframe.onload= function() {
    console.log('loaded from iFrame');
    var doc = iframe.contentWindow.document;
    var $html = $(doc);
    iframe.remove();
    handlePageObject($html);
    return;
  };
  iframe.contentWindow.document.open();
  iframe.contentWindow.document.write(html);
  iframe.contentWindow.document.close();
}

function handlePageObject($html) {
  //do something with entire html as jquery object
  var title = $html.find('title').html();
  console.log(title);
}