JavaScript:使用Xpath定位网页元素(含Iframe定位)
一、非Iframe内元素使用Xpath定位
- 在JS中定义使用Xpath的函数
注:在Chrome开发者工具Console中可以直接使用该函数,无需定义
function $x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
二、Iframe内元素使用Xpath定位(非跨域Iframe)
- 改进Xpath方法,将document作为参数,即可实现在Iframe中使用Xpath定位元素
function $x(DOCUMENT, STR_XPATH) {
var xresult = DOCUMENT.evaluate(STR_XPATH, DOCUMENT, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
- 通过ID或Class属性定位Iframe,可以通过以下代码可以获取到Iframe内的document对象
document.getElementById('iframe的ID').contentWindow.document // 通过ID定位
document.getElementsByClassName('iframe的Class').contentWindow.document // 通过Class定位
三、实战案例(以获取QQ邮箱中收件列表为例)
1. 定位Iframe元素
// 方式一:使用getElementById()定位Iframe
var iframe_document = document.getElementById('mainFrame').contentWindow.document;
// 方式二:使用Xpath定位Iframe
var iframe_document = $x(document, "//iframe[@id='mainFrame']")[0].contentWindow.document;
2. 获取所有邮件标题和概要
function get_email_infos(){
var email_infos = [];
var iframe_document = document.getElementById('mainFrame').contentWindow.document;
var emails = $x(iframe_document, "//table[contains(@class, 'i') and not(contains(@class, 'bold'))]");
for(var k in emails){
var email_title = emails[k].getElementsByClassName("tt")[0].textContent;
var email_desc = emails[k].getElementsByClassName("no")[0].textContent;
email_infos.push({'title': email_title, 'desc': email_desc});
}
return email_infos;
}