Question

我正在尝试编写一个chrome扩展，它将从当前页面获取值，然后使用该信息转到另一个页面并从html响应中提取特定元素。我可以很好地获得html响应，但我无法解析html响应以获取特定元素。

content.js

function getTicketInfo(){
    var ticketURI = document.getElementById("p3_lkid").value;
    var ticketNumber = document.getElementById("p3_lkold").value;

    var xhr = new XMLHttpRequest();
    xhr.open('GET',"remotePage.html",true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            function handleResponse(xhr)
        }
    }

    xhr.send();
}

function handleResponse(xhr){
    var contactElement = xhr.getElementById("CF00N80000005MAX6_ileinner");
    alert(contactElement.clildNodes[0].nodeValue);
}

remotePage.html

<html>
    <div id="CF00N80000005MAX6_ileinner">
        <a href="/0033400001pt8Ox" id="lookup0033400001pt8Ox00N80000005MAX6">Text I need!</a>
    </div>
</html>

如何从外部页面获取此值？有没有更好的方式来请求这些信息？

Answer 1

您的XHR响应是字符串，而不是DOM。使用jQuery，您将能够将其转换为DOM，并进行查询。

function handleResponse(xhr){
    $(xhr.response).find('#CF00N80000005MAX6_ileinner')
}

Answer 2

这很简单，就是不解析对DOM对象的HTML响应。根据MDN，这是你解析XML（或HTML，以及使用Vanilla JavaScript）的方式：

var parser = new DOMParser();

var doc = parser.parseFromString(xhr, "text/xml");

然后使用新的DOM对象doc来访问元素。

var contactElement = doc.getElementById("CF00N80000005MAX6_ileinner");
alert(contactElement.childNodes[0].nodeValue);

我也注意到你拼写错误childNodes，但这不是主要问题。

从XMLHttpResponse获取innerHTML

2 个答案: