使 CasperJS 完全重新加载片段（hashbang）链接答案

【问题标题】：Make CasperJS fully reload fragment (hashbang) links使 CasperJS 完全重新加载片段（hashbang）链接
【发布时间】：2015-12-28 04:14:46
【问题描述】：

当我使用示例 here 时，我发现同一页面上的一系列 hashbang 链接（动态创建不同的内容）仅在第一次生成内容。对于所有其他结果，使用第一个链接中的 this.getHTML()。

例如当我加载 http://test.localhost/ 并发现：

http://test.localhost/#!/page1
http://test.localhost/#!/page2
http://test.localhost/#!/page3

每次迭代都使用#!/page1 的内容。当我以相反的顺序添加列表时，每次迭代都使用#!/page3 的内容。就像第一次一切正常，但 CasperJS 或 PhantomJS 在内部检测到哈希更改而不是新 URL，不加载 onHashChange 功能，并忽略它。

如何让 CasperJS 重新加载每个 URL，即使哈希值发生变化，就好像它是第一次打开一样？

我正在使用 Grunt job 自动附带的 PhantomJS 1.9.18。

【问题讨论】：

你使用什么 PhantomJS 版本？你试过 PhantomJS 2（可能需要从 git 安装 CasperJS）吗？
1.9.18，自动附带Grunt job。我不想改变上游给我的东西。因此，如果您说这是旧版本的问题，我正在寻找解决方法。

标签： phantomjs casperjs hashbang

【解决方案1】：

我遇到了与 PhantomJS 非常相似的情况。这让我彻底疯了。花了很长时间才弄清楚，但我的“小”技巧是：

return client
  .url('about:blank') // Weee
  .url('http://www.foo.com/#meow')
  .waitForElementVisible('body', 1000)

【讨论】：

【解决方案2】：

这可能是 PhantomJS 1.x 中的一个错误（不保证）。如果您不想将 PhantomJS 更新到第 2 版，您可能希望根据您的观察结果来“从头到尾”进行每次迭代。您似乎正在像这样按顺序打开页面：

casper.thenOpen(url[0], function(){ /* do something*/ });
casper.thenOpen(url[1], function(){ /* do something*/ });
casper.thenOpen(url[2], function(){ /* do something*/ });

解决此问题的一种方法可能是在这些调用之间加载一个完全不同的页面：

casper.thenOpen(url[0], function(){ /* do something*/ });
casper.thenOpen("http://example.com");
casper.thenOpen(url[1], function(){ /* do something*/ });
casper.thenOpen("http://example.com");
casper.thenOpen(url[2], function(){ /* do something*/ });

http://example.com 非常适合这种情况，因为它始终在线且非常小，但这仍然会产生不必要的请求。另一种方法是在完成后将当前页面重置为“about:blank”：

casper.thenOpen(url[0], function(){ /* do something*/ });
casper.then(function(){ this.page.content = ""; });
casper.thenOpen(url[1], function(){ /* do something*/ });
casper.then(function(){ this.page.content = ""; });
casper.thenOpen(url[2], function(){ /* do something*/ });

page.content = ''清空页面内容的同时也改变了当前的URL，这样下次打开操作就可以干净了。

【讨论】：

谢谢，点赞。等着看我的最终解决方案是什么。