javascript - 如何在没有 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>

没有最后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