javascript - 如何将外部 HTML 文件加载到 Javascript 文档对象中

Question

我正在寻找类似于 PHP 的 DOMDocument->loadHTMLFILE() 的 javascript 方法，以便我可以解析外部 html 文件的内容并提取图像。现在我正在通过 ajax 来做，这太慢了。

这是我用来抓取图像的 PHP，它可以工作。我只是想在浏览器端做同样的事情，这样速度更快。

if(isset($_POST['link']) && $_POST['link'] !== ""){
    //extract relevant article info from link
    $sourceArray = array();
    $sizeArray = array();
    $link = $_POST['link'];
    //generate new DOMdoc
    $article = new DOMDocument;
    $article ->loadHTMLFile($link);
    //get the largest image
    $images = $article->getElementsByTagName("img");
    foreach($images as $image){
        $source = $image->getAttribute("src");
        if(strpos($source, "http://") !== false){
            $sizeProfile = getimagesize($source);
            $imgArea = $sizeProfile[0] * $sizeProfile[1];
            if($imgArea > 100){
                array_push($sizeArray, $imgArea);
                array_push($sourceArray, $source);
            }
        }
    }
    array_multisort($sizeArray, SORT_DESC, $sourceArray);
    $sourceHTML = "";
    $i = 0;
    foreach($sourceArray as $source){
        $id = 'image'.$i;
        $sourceHTML .= '<img id="'.$id.'" class="notSelectedPicture" src="'.$source.'" onclick="toggleSelectedPicture(\''.$id.'\');" alt="alt">';
        $i++;
    }
    echo $sourceHTML;
    exit();
}

Answer 1

ajax 解决方案适用于此目的。作为客户端语言，JS 似乎不能像 PHP 那样获取和解析外部 html 文件。为了减少加载时间，应该关注 ajax 发布到的 dom 解析代码的效率。