【发布时间】：2016-06-08 08:50:47
【问题描述】：
我使用与Checking JavaScript AJAX loaded resources with Mink/Zombie in PHP? 中相同的示例：
test_JSload.php
<?php
if (array_key_exists("QUERY_STRING", $_SERVER)) {
if ($_SERVER["QUERY_STRING"] == "getone") {
echo "<!doctype html>
<html>
<head>
<script src='test_JSload.php?gettwo'></script>
</head>
</html>
";
exit;
}
if ($_SERVER["QUERY_STRING"] == "gettwo") {
header('Content-Type: application/javascript');
echo "
function person(firstName) {
this.firstName = firstName;
this.changeName = function (name) {
this.firstName = name;
};
}
";
exit;
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.my_btn { background-color:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var thishref = window.location.href.slice(0, window.location.href.indexOf('?')+1);
var qstr = window.location.href.slice(window.location.href.indexOf('?')+1);
function OnGetdata(inbtn) {
console.log("OnGetdata; loading ?getone via AJAX call");
//~ $.ajax(thishref + "?getone", { // works
var ptest = {}; // init as empty object
console.log(" ptest pre ajax is ", ptest);
$.ajax({url: thishref + "?getone",
async: true, // still "Synchronous XMLHttpRequest on the main thread is deprecated", because we load a script; https://stackoverflow.com/q/24639335
success: function(data) {
console.log("got getone data "); //, data);
$("#dataholder").html(data);
ptest = new person("AHA");
console.log(" ptest post getone is ", ptest);
},
error: function(xhr, ajaxOptions, thrownError) {
console.log("getone error " + thishref + " : " + xhr.status + " / " + thrownError);
}
});
ptest.changeName("Somename");
console.log(" ptest post ajax is ", ptest);
}
ondocready = function() {
$("#getdatabtn").click(function(){
OnGetdata(this);
});
}
$(document).ready(ondocready);
</script>
</head>
<body>
<h1>Hello World!</h1>
<button type="button" id="getdatabtn" class="my_btn">Get Data!</button>
<div id="dataholder"></div>
</body>
</html>
然后，您可以使用 PHP > 5.4 CLI（命令行）在同一目录（.php 文件）中运行一个临时服务器：
php -S localhost:8080
...最后，您可以访问http://127.0.0.1:8080/test_JSload.php的页面。
简单地说，在这个页面中，当按钮被点击时，JavaScript 类会分两次加载——首先是一个带有<script> 标签的 HTML，然后它的脚本会在第二次加载。此操作的 Firefox 在控制台中打印：
OnGetdata; loading ?getone via AJAX call test_JSload.php:13:3
ptest pre ajax is Object { } test_JSload.php:16:3
TypeError: ptest.changeName is not a function test_JSload.php:31:3
got getone data test_JSload.php:21:7
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ jquery-1.12.4.min.js:4:26272
ptest post getone is Object { firstName: "AHA", changeName: person/this.changeName(name) } test_JSload.php:24:7
我最终想检查 CasperJS 中的 ptest 变量或 person 类。到目前为止，我制作了这个脚本：
test_JSload_casper.js
// run with:
// ~/.nvm/versions/node/v4.0.0/lib/node_modules/casperjs/bin/casperjs test_JSload_casper.js
// based on http://code-epicenter.com/how-to-login-to-amazon-using-casperjs-working-example/
var casper = require('casper').create({
pageSettings: {
loadImages: false,//The script is much faster when this field is set to false
loadPlugins: false,
userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
}
});
//First step is to open page
casper.start().thenOpen("http://127.0.0.1:8080/test_JSload.php", function() {
console.log("website opened");
});
//Second step is to click to the button
casper.then(function(){
this.evaluate(function(){
document.getElementById("getdatabtn").click();
});
});
//Wait for JS to execute?!, then inspect
casper.then(function(){
console.log("After login...");
console.log("AA " + JSON.stringify(person));
});
casper.run();
...但是，当我运行这个 CasperJS 脚本时，我得到的只是：
$ ~/.nvm/versions/node/v4.0.0/lib/node_modules/casperjs/bin/casperjs test_JSload_casper.js
website opened
After login...
... 仅此而已。请注意，最后一行 console.log("AA " + JSON.stringify(person)); 甚至没有部分执行（即没有打印“AA”，也没有任何类型的错误消息）。
那么，是否可以使用 Casper JS 来检查此类资源（AJAX 加载的 JS 对象/类，可能通过多个运行/步骤加载） - 如果可以，如何？
【问题讨论】：
标签： javascript ajax phantomjs casperjs