如何获取原始的innerHTML 源代码而不使用Javascript 生成的内容？

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

我认为没有一个简单的解决方案可以“获取原始源”，因为它必须是浏览器提供的东西。但是，如果您只想对页面的一部分执行此操作，那么我有一个解决方法。

您可以将感兴趣的部分包装在“冻结”脚本中：

type 属性是我刚刚编写的，但它会强制浏览器忽略其中的所有内容。然后，您可以在这个脚本标签之后立即添加另一个脚本标签（这次是正确的 javascript）——“解冻”脚本。此解冻脚本将通过 ID 获取冻结的脚本，抓取其中的文本，然后执行 document.write 将实际内容添加到页面。每当您需要原始源时，它仍然会被捕获为冻结脚本内的文本。

现在你就得到了它。缺点是我不会在整个页面上使用它...（SEO、语法突出显示、性能...），但如果您对页面的一部分有特殊要求，这是完全可以接受的。

---

编辑：这是一些示例代码。此外，正如 @FlashXSFX 正确指出的那样，冻结脚本中的任何脚本标签都需要转义。因此，在这个简单的示例中，我将为此目的创建一个 标记。

<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

一个简单的方法是再次从服务器获取它。它很可能在缓存中。这是我使用 jQuery.get() 的解决方案。它获取页面的原始 uri，并通过 ajax 调用加载数据：

$.get(document.location.href, function(data,status,jq) {console.log(data);})

这将打印原始代码，无需任何 javascript。它不做任何错误处理！

如果不想使用 jQuery 来获取源，请参阅此问题的答案： 如何在没有jquery的情况下进行ajax调用？

Answer 3

您能否将 Ajax 请求发送到当前所在的同一页面并将结果用作原始 HTML？在适当的条件下，这是万无一失的，因为您实际上获得的是原始 HTML 文档。但是，如果页面根据每个请求（具有动态内容）而更改，或者由于某种原因您无法向该特定页面发出请求，则此方法将不起作用。

Answer 4

蛮力方法

var orig = document.getElementById("test").innerHTML;
alert(orig.replace(/<\/script>[.\n\r]*.*/i,"</script>"));

编辑：

这可能会更好

var orig = document.getElementById("test").innerHTML + "<<>>";
alert(orig.replace( /<\/script>[^(<<>>)]+<<>>/i, "<\/script>"));

Answer 5

如果您覆盖 document.write 以在脚本写入文档的所有内容的开头和结尾添加一些标识符，您将能够使用正则表达式删除这些写入。

这是我想到的：

    <script type="text/javascript" language="javascript">
        var docWrite = document.write;
        document.write = myDocWrite;

        function myDocWrite(wrt) {
            docWrite.apply(document, ['<!--docwrite-->' + wrt + '<!--/docwrite-->']);
        }
    </script>

在初始脚本之后的页面中的某个位置添加了您的示例：

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

然后我用它来提醒里面的内容：

    var regEx = /<!--docwrite-->(.*?)<!--\/docwrite-->/gm;
    alert(document.getElementById('test').innerHTML.replace(regEx, ''));

Answer 6

如果您想要原始文档，则需要再次获取它。没有办法解决这个问题。如果不是 document.write() （或在加载过程中运行的类似代码），您可以在修改之前在 load/domready 上将原始文档的 innerHTML 加载到内存中。

Answer 7

我想不出一个可以按照您要求的方式工作的解决方案。 Javascript 唯一可以访问的代码是通过 DOM，它只包含页面处理后的结果。

我能想到的最接近实现你想要的就是使用 Ajax 将页面的原始 HTML 的新副本下载到 Javascript 字符串中，此时由于它是一个字符串，你可以用它做任何你喜欢的事情，包括显示将其放入警报框中。

Answer 8

一个棘手的方法是使用

console.log(document.getElementById('test').innerHTML);

<style id="test" type="text/html+template">
    <script type="text/javascript">document.write("hello");</script>
</style>

但我不喜欢这种丑陋的解决方案。

Answer 9

我认为你想遍历 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('');