加载所有javascript后如何输出DOM？答案

【问题标题】：How to output DOM after all javascript loaded?加载所有javascript后如何输出DOM？
【发布时间】：2012-05-31 14:17:07
【问题描述】：

作为标题，我的问题是如何输出页面上的所有 DOM 内容（比如说在服务器计算机上保存为文本文件或将结果传递给其他一些 php 函数）？

我做了一些功课，我试过 curl 可以使用 "curl http://google.ca > dom.txt" 输出所有 DOM 内容但是，这种方法不会保存 Javascript 生成的内容，也就是说，javascript 代码不会运行。另一种方法是在页面中嵌入一些javascript代码，让页面加载我们要输出的网站，然后在加载完所有内容后使用javascript代码保存所有DOM文件。

我不确定phantom.js是否可以做这样的工作，如果可以，那怎么做？

任何机构都可以就如何实现这一目标给出详细的答案？

我对任何解决方案持开放态度，该程序将在我的服务器上运行以提供服务。

提前谢谢你。

【问题讨论】：

你为什么不认为phantom.js可以？我认为这正是它的用途。
@iambriansreed：是的，但你真的认为“jQuery”能够胜任这项任务吗？
@Explosion Pills：我只在命令行中尝试了 phantom 来导出 har 文件。你能给我一些详细的指导来实现这一点吗？非常感谢！

标签： php javascript dom curl phantomjs

【解决方案1】：

您可以使用document.documentElement.innerHTML 获取 HTML 元素的内容（包括头部和主体）。如果您需要所有内容，可以将document.doctype 与document.documentElement.outerHTML 连接起来。

请注意，outerHTML 不是跨浏览器（它适用于 IE 和 Chrome，但不适用于 Firefox） - 有关为 Firefox 模拟 outerHTML 的方法，请参阅此问题：How do I do OuterHTML in firefox?

【讨论】：

感谢您的回答。那么如何输出这个内部的 javascript 对象呢？
可能只是使用 jQuery 帖子，就像 iambriansreed 建议的那样。我的回答是替换 $("html").html() - 特别是如果您需要 doctype 和 <html> 标签。
我对 phantom.js 不熟悉，但是在搜索了它的文档之后，您也许可以通过 WebPage.content 属性完成同样的事情。

【解决方案2】：

为什么不：

jQuery(document).ready(function($) {
    $.post(
        '/your_filename.php',
        'html='+$("html").html(),
        function(response){
            alert(response);
        }
    );
});

【讨论】：

酷，刚刚测试过。如果我们不使用 phantom.js，这将是一个很好的解决方案。

【解决方案3】：

Javascript 是一种客户端语言，因此在服务器上运行它需要专门的技术。 PHP 实际上有能力处理 DOM 的东西，因为它可以在传输到客户端之前构建和修改 dom 元素，阅读更多关于 here.

我不确定您这样做是为了完成什么，但听起来您太努力了：您正在向客户端发送代码，以便客户端可以转身并将代码发送回服务器以便服务器可以将其保存为文件？虽然如果这是您需要做的，请按照 Brilliand 和 iambriansreed 的建议使用 Javascript/jQuery 收集 dom 元素。

【讨论】：

感谢您的回答。一切实际上都是在服务器上完成的，甚至向“客户端”发送代码，这个客户端可能只是一个浏览器，在 X 会话中运行代码。
（phantom.js 被设计用于“无头”或“在服务器上”运行）
@pst 我知道在服务器上运行 javascript 是可能的（通过阅读一个名为“Dart”的编程语言项目 --dartlang.org），但从来没有真正看到使用它的意义，因为那里已经有不少强大的服务器端语言了，所以我从来没有真正研究过。