使用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

回答

相關問題