[英]How do I access an iframe from CasperJS?
I have a webpage with an iframe. 我有一个带有iframe的网页。 I'd like to access the contents of the iframe using CasperJS . 我想使用CasperJS访问iframe的内容。 In particular, I need to click buttons and fill a form. 特别是,我需要单击按钮并填写表格。 How can I do that? 我怎样才能做到这一点?
The main webpage is main.html : 主页是main.html :
<html><body>
<a id='main-a' href="javascript:console.log('pressed main-a');">main-a</a>
<iframe src="iframe.html"></iframe>
<a id='main-b' href="javascript:console.log('pressed main-b');">main-b</a>
</body></html>
The iframe is: iframe是:
<html><body>
<a id='iframe-c' href="javascript:console.log('pressed iframe-c');">iframe-c</a>
</body></html>
My naïve approach: 我的天真做法:
var casper = require('casper').create({
verbose: true,
logLevel: "debug"
});
casper.start("http://jim.sh/~jim/tmp/casper/main.html", function() {
this.click('a#main-a');
this.click('a#main-b');
this.click('a#iframe-c');
});
casper.run(function() {
this.exit();
});
Doesn't work, of course, because the a#iframe-c
selector isn't valid in the main frame: 当然不起作用,因为a#iframe-c
选择器在主框架中无效:
[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
[debug] [phantom] opening url: http://jim.sh/~jim/tmp/casper/main.html, HTTP GET
[debug] [phantom] Navigation requested: url=http://jim.sh/~jim/tmp/casper/main.html, type=Other, lock=true, isMainFrame=true
[debug] [phantom] url changed to "http://jim.sh/~jim/tmp/casper/main.html"
[debug] [phantom] Navigation requested: url=http://jim.sh/~jim/tmp/casper/iframe.html, type=Other, lock=true, isMainFrame=false
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step 2/2 http://jim.sh/~jim/tmp/casper/main.html (HTTP 200)
[debug] [phantom] Mouse event 'click' on selector: a#main-a
[info] [remote] pressed main-a
[debug] [phantom] Mouse event 'click' on selector: a#main-b
[info] [remote] pressed main-b
[debug] [phantom] Mouse event 'click' on selector: a#iframe-c
FAIL CasperError: Cannot dispatch click event on nonexistent selector: a#iframe-c
# type: uncaughtError
# error: "CasperError: Cannot dispatch click event on nonexistent selector: a#iframe-c"
CasperError: Cannot dispatch click event on nonexistent selector: a#iframe-c
/tmp:901 in mouseEvent
/tmp:365 in click
/tmp/test.js:9
/tmp:1103 in runStep
/tmp:324 in checkStep
Is there any way to make this work? 有什么办法可以使这项工作吗? A hack that involves poking into phantomjs directly would be fine, but I don't know what to do there. 直接涉及到phantomjs的hack很好,但是我不知道该怎么办。
I'm using CasperJS version 1.0.0-RC1 and phantomjs version 1.6.0. 我正在使用CasperJS 1.0.0-RC1版和phantomjs 1.6.0版。
Spent forever looking for this, and of course I found the answer minutes after posting the question. 一直花时间寻找这个问题,当然我在发布问题后几分钟就找到了答案。
I can use the new frame switching commands added to phantomjs in this commit . 我可以在此commit中使用添加到phantomjs的新帧切换命令。 Specifically, the this.page.switchToChildFrame(0)
and this.page.switchToParentFrame()
functions. 具体来说, this.page.switchToChildFrame(0)
和this.page.switchToParentFrame()
函数。 It appears undocumented, and it also seems that the methods have been changed for upcoming releases, but it does work: 似乎未记录在案,并且似乎方法也已针对即将发布的版本进行了更改 ,但它确实起作用:
var casper = require('casper').create({
verbose: true,
logLevel: "debug"
});
casper.start("http://jim.sh/~jim/tmp/casper/main.html", function() {
this.click('a#main-a');
this.click('a#main-b');
this.page.switchToChildFrame(0);
this.click('a#iframe-c');
this.page.switchToParentFrame();
});
casper.run(function() {
this.exit();
});
实际上,您必须使用Phantomjs 1.5
提供的新--web-security=no
功能,才能访问这些iFrames
及其内容。
Suppose we have different frames(frame1 and frame2) and we have to access different elements(like click or check if div tag exits or not) of those frames. 假设我们有不同的框架(frame1和frame2),并且我们必须访问这些框架的不同元素(例如单击或检查div标签是否退出)。
casper.withFrame('frame1', function() {
var file = '//*[@id="profile_file"]';
casper.thenClick(x(file));
});
casper.withFrame('frame2', function() {
casper.then(function () {
casper.waitForSelector('#pageDIV',
function pass() {
console.log("pass");
},
function fail(){
console.log("fail");
}
);
});
});
You can do something like this: 您可以执行以下操作:
casper.start("url here...", function() {
this.withFrame(0, function() {
this.evaluate(function() {
document.querySelector('img#btn_start').click();
})
})
});
You can replace the zero with the name of the iframe. 您可以将零替换为iframe的名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.