查看由JavaScript生成的HTML页面的实际源代码

Question

查看由JavaScript生成的HTML页面的实际源代码

3

假设我有一段JavaScript代码，从PHP中接收包含整个HTML页面的字符串。我将该字符串写入当前文档，然后更改其中一个包含元素。代码示例如下：

<script type="text/javascript">
var foo = <?php echo $html_document;?>;
document.open();
document.write(foo);
document.close();
document.getElementById("some_id_within_html_document").innerHTML = "some stuff";
</script>

这给我带来了理想的输出，一切看起来都很棒……除非你查看此页面的源代码。如果我想以后爬取此页面并执行相同的操作，则会显示JavaScript而不是浏览器解释的HTML。使用此方法，我应该如何爬取所需的HTML，而不是由JavaScript生成的HTML？我已经通过在PHP中处理字符串来绕过此问题，但是我仍然好奇是否可能以这种方式显示解释后的HTML，而在查看源代码/爬取页面时。

编辑：全面的回复，让我学到了很多关于实际发生的情况和应该避免的做法。在与我的原始问题相关的方面中，最简单的解决方案是Justin Wood提供的方案。

- Will Sampson

你意识到那是一个矛盾之处吗？如果页面是由脚本生成的，它就没有源标记。然而，innerHTML属性应该是基于HTML片段序列化算法的标记等效物。请注意，将文档片段序列化，然后使用HTML解析器将结果转换回片段可能不会产生与原始结果完全相同的结果。 - RobG

5个回答

1

不要将你的 PHP 变量传递到 JavaScript 中。只需输出变量本身，然后使用 JavaScript 编辑您想要编辑的任何内容...

<?php
$html = "<html><head><title></title></head><body><p id='p'>Something</p></body></html>";

echo $html;
?>

<script type="text/javascript">
  document.getElementById("p").innerHTML = "blah";
</script>

类似这样的东西应该适合你。

注意：我只在Chrome、FF和Safari中测试过这个。

- Justin Wood

0

你不能直接获取HTML源代码，因为其中的内容是由Javascript动态生成的。原始的HTML代码包含需要执行的Javascript脚本，该脚本会操作页面的DOM以添加更多内容。原始的HTML代码不会改变，它仍然只包含Javascript脚本。

如果你想要“爬取”由Javascript生成的内容，你必须解析和执行整个页面，包括Javascript和DOM，并评估结果产生的更改后的DOM。

- deceze

好奇心驱使我使用 CodeIgniter 框架的 PHP，我相信一定有办法实现这个功能。谢谢，我会去研究一下！ - Will Sampson

-1

由于JavaScript是客户端语言，当您查看页面源代码时，它不会被执行，因此导致视觉结果与源代码之间的差异。您需要使用PHP或其他服务器端语言替换JS才能实现相同的结果。

此外，如果您仍想使用JavaScript，则必须在JavaScript执行后查看包含所有HTML节点的DOM或文档对象。一种方法是使用Chrome中的检查器（CTRT + SHIFT + I）或（右键单击->检查此元素）。

- JCOC611

-2

暂时离开JavaScript参考，你真的想要“查看源代码”，这曾经是浏览器中的一个简单选项吗？一种原始的外观可以帮助找到拼写错误等问题吗？

在Chrome中，这是Ctl-U。虽然不再是菜单选项，但在2022-10-29仍然有效。

- Ali Kayn

他想以编程方式获取代码。 - A. Khaled

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Aaron Meese

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rsp · Accepted Answer

我不确定你想要做什么，但你可以使用类似以下的方法来查看生成/修改后的DOM的HTML等效代码：

document.documentElement.innerHTML

或者：

document.getElementById("some_id").innerHTML

请查看演示。

您可以创建一个书签小程序，其中包括此代码：

alert(document.documentElement.innerHTML);

在您查看的每个页面上，查看由JavaScript修改的DOM的HTML。

更新：

如果您想在服务器上进行一些网络爬虫，在那里您想下载一些外部网页，执行其JavaScript，然后查看对应于执行JavaScript后的DOM的HTML（包括document.write调用等），则尝试使用Zombie或Phantom。另请参阅Mink，这是一个支持Zombie的PHP工具。

通常搜索带有JavaScript引擎的无头浏览器。

与其他答案中人们所写的相反，实际上是可能的。