1

So what I'm doing is, with a super simple PHP proxy that only uses file_get_contents I fetch an HTML and convert it to htmlentities in UTF-8 format. After that with jQuery which is doing the AJAX call I want to get the whole HTML which includes the tags, <html><head><body>code..</body></head></html> into an iframe so then I can traverse it with jQuery in search of inputs. Is there a way to do this? If it can be done some other way that is welcomed too, I'm just doing iframe because I thought that it was the best option. Since it's a complete HTML doc with doctype and everything I think I can't just append it to a div and then traverse it. My jQuery code is as follows:

$(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*/

});

The problem is that nothing is ever loaded into the iframe, no error is thrown and the request is successful bringing the HTML in the response. For example if I give the URL http://google.com to the script it should give a count of N inputs back. Since if you go to Google and type in the URL javascript: alert(document.getElementsByTagName('input').length) will alert N number of inputs since there's N inputs. I hope that with the example provided everything is clearer.

4

3 回答 3

5

您需要使用contentDocumentiframe 的属性将内容放入其中。

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

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

这个答案让您知道将所有内容放入 iframe 的 contentDocument

例子：

var iframe =  $('#iframe');
var idoc = iframe[0].contentDocument;
idoc.open();
idoc.write(mytext);
idoc.close();
于 2013-04-24T18:02:07.223 回答
2

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

于 2013-04-24T17:59:25.673 回答
0

我注意到，如果您将 HTML 放入iframe中，它将被编码。如果 iframe 包含立即下降的输入，则调用$("iframe input").length将返回 0。

如果您使用 adiv代替，则不会对 HTML 进行编码，从而允许您计算元素的数量：

$(document).ready(function() {

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

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

在 jsFiddle 上运行它。

除此之外，我没有看到任何问题，尽管如果您可以克服跨域限制，我也会在客户端获取 HTML（到目前为止，我想不出您会如何做到这一点）。

于 2013-04-24T20:18:30.067 回答