使用jQuery添加从Doctype开始到iframe的完整HTML

因此，我正在做的是使用仅使用file_get_contents的超级简单PHP代理，我获取HTML并将其转换为UTF-8格式的htmlentities。之后，用jQuery进行AJAX调用，我希望将包含标记的整个HTML，<html><head><body>code..</body></head></html>放入iframe中，然后使用jQuery遍历它来搜索输入。有没有办法做到这一点？如果可以通过其他方式来实现，我只是在做iframe，因为我认为这是最好的选择。由于它是一个完整的HTML文档，其中包含doctype和所有我认为我不能将它附加到div然后遍历它。我的jQuery代码如下：使用jQuery添加从Doctype开始到iframe的完整HTML

$(document).ready(function(){ 

var globalCount = 0; 


function countInputs(data, url){ 
    var unparsedHTML = data.html; // get data from json object which is in htmlentities 
    var iframeCreate = $('<iframe id="iframe"></iframe>'); 
    var iframe = $('#iframe'); 
    if(iframe.length){ 
     iframe.remove(); // if iframe exists remove it to clean it 
     iframeCreate.insertAfter($('#result')); //create iframe  
    }else{ 
     iframeCreate.insertAfter($('#result')); //create iframe  
    } 
    iframe.html(unparsedHTML).text(); // insert html in iframe using html(text).text() to decode htmlentities as seen in some stackoverflow examples 
    var inputs = iframe.contents().find('input'); //find inputs on iframe 
    var count = inputs.length; 
    var output = ''; 
    globalCount = globalCount + count; 
    output = "Count for url: " + url + " is: " + count + " , the global count is: " + globalCount; 
    console.log(output); 
    $('#result').append(output); 
} 

/*SNIP ----- SNIP */ 


function getPage(urls){ 
    console.log("getPage"); 
    for(i = 0; i < urls.length; i++){ 
     var u = urls[i];  
     console.log("new request: " + urls[i]); 
     var xhr = $.ajax(
     { 
      url: "xDomain.php", 
      type: "GET", 
      dataType: "json", 
      data: { 
       "url":u 
      } 
     }) 

     xhr.done(function(data){ 
      console.log("Done, starting next function"); 
      countInputs(data, u) 
      }); 
     xhr.fail(function (jqXHR, textStatus, errorThrown) { 
      if (typeof console == 'object' && typeof console.log == 'function') { 
       console.log(jqXHR); 
       console.log(textStatus); 
       console.log(errorThrown); 
      } 
     }); 

    } 
} 

/*SNIP------------SNIP*/ 

});

的问题是，没有什么是以往任何时候都加载到iframe中，不会引发错误，并请求成功使HTML的响应。例如，如果我将URL http://google.com提供给脚本，它应该返回N个输入计数。因为如果您访问Google并输入网址javascript: alert(document.getElementsByTagName('input').length)将会提示N个输入，因为有N个输入。我希望用例子提供的一切都更清楚。

来源

2013-04-24 Samuel Lopez

您需要使用iframe的contentDocument属性来放入内容。

另外：您需要将iframeCreate追加到文档的某处，否则“#iframe”不会返回任何内容。

http://www.w3schools.com/jsref/prop_frame_contentdocument.asp

This answer让你知道把什么东西都往iframe的contentDocument

例子：

var iframe = $('#iframe'); 
var idoc = iframe[0].contentDocument; 
idoc.open(); 
idoc.write(mytext); 
idoc.close();

来源

2013-04-24 18:02:07

我也会尝试这个答案，关于“追加我的iframeCreate”不会将jQuery的insertAfter函数作为append（'iframeCreate.insertAfter（$（'＃result'））; //创建iframe'）？我是否需要创建一个div并将iframe附加到该div，或者通过追加来表达什么意思？ – 2013-04-24 18:31:12

噢，你是完全正确的 – 2013-04-26 01:23:06

在客户端做服务器的工作？不是最聪明的主意。我认为你这样做的原因是因为你想用jquery操纵dom（也许simplexml对你没有吸引力？）。在这种情况下，我建议看看http://querypath.org/。它是服务器的jQuery。

来源

2013-04-24 17:59:25 Twisted1919

因此，我接受了您的建议，并且我在服务器端完成了这项工作，如您所说，使用DOM更容易。我不知道你可以用PHP来操纵DOM创建一个新的这个答案帮了我很多[在页面PHP中计算所有的HTML标签]（http://stackoverflow.com/questions/3184284/count-all-html-tags-尽管我使用你的答案作为一种方法，但我标记了另一个答案是真正的答案，因为它做了我所要求的。但是，这个技巧是伟大的，真正做到我想做的。谢谢！ – 2013-04-25 13:58:44

我真的不在乎哪个答案被标记，只要你以正确的方式完成你的工作:) – Twisted1919 2013-04-25 14:13:47

我已经注意到，如果你把HTML到iframe，它将被编码。如果iframe中包含一个立即下降输入，呼叫$("iframe input").length将返回0。

如果你使用div相反，HTML不会进行编码，让您计算元素的数量：

$(document).ready(function() { 

    //works :) 
    console.log("inputs in div: " + $("div input").length); 

    //returns 0 
    console.log("inputs in iframe: " + $("iframe input").length); 
});

Run it on jsFiddle。

除此之外，我没有看到问题，但是如果您可以克服跨域限制（不能想到如何做到这一点），我也会在客户端获取HTML，。

来源

2013-04-24 20:18:30

我做过这样的尝试，但我相信由于HTML具有Doctype声明，CSS，Javascript和HEAD，所以在实际页面和新页面之间存在某种混合，因此DOM从未完全加载。 – 2013-04-26 18:16:11

使用jQuery添加从Doctype开始到iframe的完整HTML

回答

相关问题