Question

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

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

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

我尝试了几种方法但没有取得多大成功：

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

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

Answer 1

从脚本元素中提取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>

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

1 个答案: