JavaScript：使用Xpath定位网页元素（含Iframe定位）

一、非Iframe内元素使用Xpath定位

1. 在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）

1. 改进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;
}

2. 通过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;
}