在html页面中将外部javascript内容显示为文本

Question

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

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

另一个要求是文件是本地文件而不是存储在Web服务器上。 最后但并非最不重要的是，我希望尽可能简单（没有jQuery，如果可能的话没有额外的javascript）。

我尝试了几种没有太大成功的方法：

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

我正在寻找简单而有效的解决方案，我已经搜索了很多，但很难找到你想要将javascript转换成纯文本并在HTML页面上显示的东西。

Answer 1

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

使用jQuery的lodash源代码示例：

 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>