如何在没有Javascript生成内容的情况下获取原始的innerHTML源代码？

Question

是否有可能以某种方式获取原始HTML源代码而不进行已处理Javascript所做的更改？例如,如果我这样做:

<div id="test">
    <script type="text/javascript">document.write("hello");</script>
</div>

如果我做:

alert(document.getElementById('test').innerHTML);

表明:

<script type="text/javascript">document.write("hello");</script>hello

简单来说,我希望alert仅显示:

<script type="text/javascript">document.write("hello");</script>

没有final hello(处理过的脚本的结果).

Answer 1

我不认为有一个简单的解决方案只是"抓住原始资源",因为它必须是浏览器提供的东西.但是,如果您只对页面的某个部分感兴趣,那么我有一个解决方法.

您可以将感兴趣的部分包装在"冻结"脚本中:

<script id="frozen" type="text/x-frozen-html">

type我刚刚编写的属性,但它会强制浏览器忽略其中的所有内容.然后,在此之后立即添加另一个脚本标记(这次正确的javascript) - "解冻"脚本.这个解冻脚本将通过ID获取冻结的脚本,获取其中的文本,并执行document.write将实际内容添加到页面.每当您需要原始源时,它仍然作为冻结脚本内的文本捕获.

你有它.缺点是我不会在整个页面中使用它...(SEO,语法高亮,性能......)但如果你对页面的某个部分有特殊要求,这是完全可以接受的.

编辑:这是一些示例代码.此外,正如@FlashXSFX正确指出的那样,冻结脚本中的任何脚本标记都需要进行转义.所以在这个简单的例子中,我将<x-script>为此目的制作一个标签.

<script id="frozen" type="text/x-frozen-html">
   <div id="test">
      <x-script type="text/javascript">document.write("hello");</x-script>
   </div>
</script>
<script type="text/javascript">
   // Grab contents of frozen script and replace `x-script` with `script`
   function getSource() {
      return document.getElementById("frozen")
         .innerHTML.replace(/x-script/gi, "script");
   }
   // Write it to the document so it actually executes
   document.write(getSource());
</script>

现在,无论何时需要源:

alert(getSource());

请参阅演示:http://jsbin.com/uyica3/edit

Answer 2

我认为你想遍历 DOM 节点：

var childNodes = document.getElementById('test').childNodes, i, output = [];

for (i = 0; i < childNodes.length; i++)
    if (childNodes[i].nodeName == "SCRIPT")
        output.push(childNodes[i].innerHTML);

return output.join('');