Phantomjs怎样优雅屏蔽掉iframe的影响?

liuian 2025-05-05 17:00 44 浏览

一. 问题描述

骚年，当你捋一遍文档，写几个小例子，觉得Phantomjs在手，天下我有的时候，也许某一次不经意的点击，发现，哎呦，选择器竟然选不中元素！！！再仔细检查，发现我用的是CSS3的选择器呀，XPath也试过，结果还是发出的API调用有如石沉大海，这怎么破？

二. 问题原因及出现场景

以上问题很大程度上是由于：你要大显身手的页面上存在iframe！导致你在文档主体无法选中iframe中的元素标签。

iframe是什么鬼？简而言之，就是文档中的文档，提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。最常见的使用场景就是广告投放。因为iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级，所以一般情况下，我们很少使用它。但害人之心不可有，防人之心不可无呀！

三. 使用场景

一些网站做模拟登陆操作的时候，登录窗口往往是嵌入在iframe之中的，这个时候使用者直接调用API来填充和提交表格，往往得不到期望登陆成功的效果。

四. 背景函数介绍

为了解决这个问题，需要了解三个函数，介绍如下：

childFramesName：列出当前页面上的活动的iframe名称，这个函数有时可以帮助你确定下一个函数switchToChildFrame的参数，所以还是比较重要的
switchToChildFrame：这个就是解决该问题的核心，它的作用是把进程的执行切换到了你指定的iframe，参数分为两种，一种是iframe的name，也就是<iframe>标签中的id属性，当然并不是每一个iframe标签都会有id属性，所以更通用的是第二种index，这个参数的确定就需要使用者根据childFramesName函数的结果和选择器上下文来推断了，记得下标是从0开始的哦。
switchToParentFrame：别高兴得太早，所谓有借有还再借不难，在子iframe中爽了一把之后，如果还需要和主DOM文档进行交互的话，一定不要忘记调用这个函数，一定不要忘记调用这个函数，一定不要忘记调用这个函数。

五. 解决办法

var webPage = require('webpage');
var page = webPage.create();
//page.childFramesName();
//page.switchToChildFrame(name | index);
//do some staff
//page.switchToParentFrame();

phantomjs安装