Question

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

$(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个输入的计数。因为如果你去谷歌并输入URL javascript: alert(document.getElementsByTagName('input').length)将提醒N个输入，因为有N个输入。我希望通过这个例子，一切都更清楚。

Answer 1

您需要使用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();

Answer 2

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

Answer 3

我注意到如果你把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。

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

3 个答案: