查看javascript生成的html页面的实际html源代码

时间:2012-10-03 00:03:47

标签: php javascript html

让我们说我有一些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?我已经通过在php中处理字符串来规避这个问题但是我仍然很好奇,如果可以在查看源/抓取页面时以这种方式显示解释的HTML。

编辑: 全面的回应,我学到了很多关于这里实际发生的事情以及我应该远离什么样的做法。贾斯汀伍德给出了最简单的解决方案,与我原来的问题相关的努力最少。

4 个答案:

答案 0 :(得分:1)

你没有。 HTML不在源期间。原始HTML包含需要执行的Javascript。 Javascript操纵页面的DOM以向其添加更多内容。原始HTML不会改变,它仍然只有Javascript。

如果你想“刮”Javascript生成的内容,你总是需要解析并执行整个页面,包括Javascript和DOM,并评估生成的更改DOM。

答案 1 :(得分: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中测试了这个

答案 2 :(得分:1)

不完全确定您要执行的操作,但您可以使用以下内容查看与生成/修改的DOM等效的HTML:

document.documentElement.innerHTML

或:

document.getElementById("some_id").innerHTML

请参阅DEMO

您可以create a bookmarklet包含此代码:

alert(document.documentElement.innerHTML);

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

更新

如果您想在服务器上进行网页抓取,要下载某些外部网页,执行其JavaScript ,然后查看与之对应的HTML执行JavaScript之后的DOM(使用document.write调用以及所有这些)然后尝试使用ZombiePhantom。另请参阅Mink以获取支持Zombie的PHP工具。

通常使用JavaScript引擎搜索无头浏览器。

与人们在其他答案中所写的内容相反,它实际上是可能的。

答案 3 :(得分:0)

由于JavaScript是一种客户端语言,因此当您查看页面源时,它不会被执行,从而导致视觉结果与源之间的差异。您必须用PHP或其他服务器端语言替换JS才能获得相同的结果。

此外,如果您仍然想使用JavaScript,那么在执行JavaScript之后,您必须查看包含所有HTML节点的DOM或文档对象。一种方法是在Chrome中使用检查器(CTRT + SHIFT + I)或(右键单击 - &gt;检查此元素)。