将外部 javascript 内容显示为 html 页面中的文本答案

【问题标题】：Display external javascript content as text in html page将外部 javascript 内容显示为 html 页面中的文本
【发布时间】：2016-11-23 18:06:29
【问题描述】：

我正在尝试显示链接到 html 页面的 javascript 代码，使用脚本标记作为同一 html 页面上的文本（并且还突出显示语法）作为用户查看底层 javascript 代码的工具。

最后我还想把 html 和 css 文件内容显示为一个学习工具，这样用户就可以在同一页面上以用户友好的方式查看所有组件（在选项卡控件的底部）。

另一个要求是文件是本地的，而不是存储在网络服务器上。最后但并非最不重要的一点是，我想让它尽可能简单（不要使用 jQuery，如果可能，不要使用额外的 javascript）。

我尝试了几种方法，但都没有成功：

使用HTML5导入和AJAX，遇到CORS和本地文件访问错误
嵌入HTML5标签，遇到提示执行javascript，不好
iframe标签，遇到提示执行javascript，不好

我正在寻找简单且有效的解决方案，我已经搜索了很多，但很难找到您想要将 javascript“转换”为纯文本并将其显示在 HTML 页面上的内容。

【问题讨论】：

如果可用，您可以使用 PHP 转义特殊字符

标签： javascript html

【解决方案1】：

从脚本元素中提取src属性并通过单独的HTTP调用加载文件内容可能是最可行的解决方案。

lodash 源代码示例，使用 jQuery：

var src = $('#lodash').attr('src');

$.get(src, undefined, function(data) {
  $('#content').text(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id='lodash' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js'></script>

<pre id='content'></pre>

【讨论】：