dom完成后如何解析javascript加载的内容答案

【问题标题】：How to parse content loaded by javascript after the dom is completedom完成后如何解析javascript加载的内容
【发布时间】：2011-04-26 04:19:56
【问题描述】：

我一直在努力解析来自 wow 军械库的一些数据，但遇到了一些障碍。当网站提供玩家获得的成就时，它使用 javascript 来控制字符串，例如#73:1283 来显示请求的信息。（我编了这个数字，但请求的数据格式如下）。

是否可以从需要 javascript 以使用 php 显示其数据的页面中提取数据？
如何使用 php 解析 dom 准备好或完成后已加载的站点中的数据？

【问题讨论】：

你能给我们一个它在做什么的代码示例吗？否则，为了完全理解您的要求，我们必须自己查看所有《魔兽世界》军械库代码以弄清楚您的意思。页面加载后网站是否异步加载数据？或者当你点击某个东西时它会进行 AJAX 调用吗？您确定是 Javascript 本身在解释字符串，而不是仅仅向某处的服务器发送请求吗？
http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement#96:14861 是一个示例链接，您可以查看我在说什么。如果您禁用 javascript，您将只能从该页面中提取 http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement，左侧与成就有关的所有菜单都将加载到 dom 中，而无需使用 html。您将无法在未启用 javascript 的情况下使用菜单，但完整菜单的数据已存在。
问题是如果不使用javascript，您无法加载与菜单项对应的内容。我承认我不是最熟练的 JS 人，但查看源代码告诉我它使用 jquery 和内部 JS 的组合来解释链接。根据查看 JS，我无法确定它从哪里提取数据。
loadModule: function(key) { var module = $('#sidebar-'+ key); if (module.length > 0) { $.ajax({ url: Core.baseUrl +'/sidebar/'+ key, type: 'GET', dataType: 'html', cache: false, global: false, success: function(data) { if (data) module.html(data); else module.remove(); }, error: function() { module.remove(); } }); } }
如果我不得不猜测，我会说这就是它从中提取数据的地方，但就像我说的那样，我不太了解 JS。

标签： php javascript parsing dynamic

【解决方案1】：

通过使用 Firebug，我能够查看 HTTP 标头以了解正在执行哪些 AJAX 调用来生成这些页面上的内容：http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement#96:14861 和 http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement#96

看起来页面正在进行异步调用以加载此页面：http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement/14861 当哈希后的部分为 96:14861 时，以及对 http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement/96 的调用当哈希后的部分仅为 96 时。两者这些页面返回可解析以呈现 HTML 的 XML。

所以一般来说，如果哈希后只有一个数字，只需将http://.../achievement/<number here> 作为 URL。如果有两个数字，请将第二个数字放在 URL 的末尾。

您需要做的不是提取 Javascript 并对其进行解释，而是自己在 PHP 中（例如使用 cURL）向这些 URL 发出 HTTP 请求并自行解析数据。

我真的建议您学习 JavaScript 和 jQuery，因为如果您不了解后台发生的所有 AJAX 负载，您将很难真正构建一个从魔兽世界军械库中提取信息的优秀网站。

【讨论】：

我还没有机会回到这个话题，但你是对的。我的发现和你的一样。感谢您的详细回复。我能够解析包含查找相应页面所需的所有信息的菜单。我了解足够多的 javascript 来使用 jquery 并绕过一点，但我仍在使用服务器端 php 来做脏活。

【解决方案2】：

我建议您看看是否可以在 PHP 中复制 JavaScript 发送的查询。虽然我不相信有一种方法可以在 PHP 中处理 JavaScript，但绝对没有一种简单或可扩展的方法。

我会尝试扫描您使用 PHP 下载的第一页的源代码，以查找您提到的那种格式的字符串。然后，如果他们网站上的 JS 正在查询类似 http://www.wow.com/armory.php?id=#72:1284 的内容，您可以下载下一个源代码。您可以了解 JS 是如何使用 FireBug 或 Chrome 或 Safari 中的 Inspector 等工具查询服务器的。

总之：

检查以查找 JS URL 格式以及是否可以复制它。
创建 PHP 以获取主页并提取所有字符串。
创建 PHP 以遍历这些字符串并获取这些页面（带有 JS 请求的 URL）。
对这些信息做任何你想做的事。

【讨论】：

http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement#96:14861 是我正在使用的链接。如果您禁用 javascript，您将无法使用与成就对应的左侧菜单，也无法检索与每个菜单项对应的数据。我对 JS 不是很熟练，所以我无法确定 JS 从哪里获取请求的页面。
该 URL 的数据似乎来自 http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement/14861。因此，您应该能够获取: 之后的URL 部分并删除#XX 并以编程方式获取您正在寻找的信息。

【解决方案3】：

你可以试试 jquery 的 $(document).onready 函数，它有帮助在网页加载时运行 java 脚本代码。

前

<div id="wowoData">#4325325</div>

<script>
$(document).ready(
function(){
$("#wowoData").css("border","1px solid red");
}

)
</script>

【讨论】：

按照现在的惯例，我正在用 PHP 解析页面。我曾考虑过使用 JS 来协助 PHP 解析一些内容，但是我对 JS 的熟练程度并不高，我正试图将想法留给服务器端环境。