iframe跨域系列——单层iframe

进入到这一章节，默认大家学完了上一章节推荐的影刀官方教程。

已经掌握了html基本语法，能操作谷歌浏览器开发者平台，会用XPath来定位元素。

获取元素对象

126邮箱登录

• 网址：https://126.com/
• 特点：账号、密码在iframe框架内

用跨域指令来输入账号。

1. 选择账号元素来进行检查；
2. 右键点击html里选中的元素，点击复制；
3. 复制XPath；
4. 在检索栏输入XPath进行校验；
5. 检验到定位到1个元素；

1. 打开网站；
2. 初始化IFrame；
3. 获取元素对象-XPath跨域；
4. 填写剪切板的XPath，勾选“基于当前IFrame全局查找”；
5. 填写输入框；
6. 运行，出错，未找到元素；
7. 再次回到开发者工具，查看id值每次打开页面或者刷新会变化，因此不能用它来定位元素；

我们采用更稳定的placeholder属性来定位账号元素。

更改XPath之后，填写账号成功。

上面是市场指令的功能，我们再看看现有的官方指令，能否完成这一效果。

打开“填写输入框”指令，去元素库选择，捕获新元素；

1. 切换到XPath捕获，捕获元素时，会自动设置好XPath；

2.若目标元素在iframe中，请在首行先写出iframe的XPath，然后换行输入目标元素的XPath；

说明指令是支持跨域操作的。

3.当然根据跨域操作的经验，XPath的id定位并不一定稳定获取元素，需要我们来更改XPath；

4.刷新页面，校验元素成功；

5.运行指令，区区两行指令，直接搞定跨域操作。

获取相似元素组

中国天气网

• 网址：http://www.weather.com.cn/alarm/alarm_list.shtml
• 特点：该页面具有一层iframe框架，搜索结果列表是一个独立的网页，嵌套在整个大网页中。

1. 用 获取像素元素组列表(web) 指令来捕获，发现找到1026个元素，页面实际展现13个元素；

2.切换至XPath，更改XPath，直至能唯一定位需要的相似元素组；

3.循环相似元素组，轻松获取元素文本内容。