如何在没有Javascript生成内容的情况下获得原始的innerHTML源代码？ [英] How do I get the original innerHTML source without the Javascript generated contents?

问题描述

是否有可能以某种方式获得原始HTML源代码，而未经过处理的Javascript所做的更改？例如，如果我这样做：

 < div id =test> 
< script type =text / javascript> document.write（hello）;< / script> 
< / div> 
  

如果我这样做：

 警报（的document.getElementById（ '试验'）的innerHTML。）; 
  

显示：

 < script type =text / javascript> document.write（hello）;< / script> hello 
  

简单来说，我希望 alert 只显示：

（$ hello）;< / script>

没有最后的 hello 处理过的脚本）。

解决方案

我不认为有一个简单的解决方案来抢原始源代码，因为它会必须是由浏览器提供的东西。但是，如果您只是对网页的某个部分进行此操作，那么我为您解决了一个问题。

您可以打包冻结脚本中的感兴趣部分：

< script id =frozentype =text / x-frozen-html >

我刚刚编写的类型属性，但它会强制浏览器忽略它里面的所有内容。然后在这个之后立即添加另一个脚本标签（这次是正确的javascript） - 解冻脚本。这个解冻脚本将通过ID获取冻结的脚本，获取其中的文本，并执行 document.write 以将实际内容添加到页面中。无论何时您需要原始源代码，仍然会将其作为冻结脚本中的文本捕获。

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

---

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

 < script id =frozentype =text / x-frozen-html> 
< div id =test> 
< x-script type =text / javascript> document.write（hello）;< / x-script> 
< / div> 
< / script> 
< script type =text / javascript> 
 //获取冻结脚本的内容并用`script`替换`x-script` 
函数getSource（）{
 return document.getElementById（frozen）
 .innerHTML .replace（/ x-script / gi，script）; 
} 
 //将其写入文档，以便它实际执行
 document.write（getSource（））; 
< / script> 
  

现在，只要您需要源代码：

 警报（的getSource（））; 
  

查看演示： http://jsbin.com/uyica3/edit

Is it possible to get in some way the original HTML source without the changes made by the processed Javascript? For example, if I do:

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

If I do:

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

it shows:

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

In simple terms, I would like the alert to show only:

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

without the final hello (the result of the processed script).

解决方案

I don't think there's a simple solution to just "grab original source" as it'll have to be something that's supplied by the browser. But, if you are only interested in doing this for a section of the page, then I have a workaround for you.

You can wrap the section of interest inside a "frozen" script:

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

The type attribute I just made up, but it will force the browser to ignore everything inside it. You then add another script tag (proper javascript this time) immediately after this one - the "thawing" script. This thawing script will get the frozen script by ID, grab the text inside it, and do a document.write to add the actual contents to the page. Whenever you need the original source, it's still captured as text inside the frozen script.

And there you have it. The downside is that I wouldn't use this for the whole page... (SEO, syntax highlighting, performance...) but it's quite acceptable if you have a special requirement on part of a page.

---

Edit: Here is some sample code. Also, as @FlashXSFX correctly pointed out, any script tags within the frozen script will need to be escaped. So in this simple example, I'll make up a <x-script> tag for this purpose.

<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>

Now whenever you need the source:

alert(getSource());

See the demo: http://jsbin.com/uyica3/edit

这篇关于如何在没有Javascript生成内容的情况下获得原始的innerHTML源代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！