使用 src/href 读取链接或脚本标签的内容

Question

如何使用

读取文件的内容

<link href='path/to/file'/>

我知道如果添加属性 type="text/css" 则可以使用 document.styleSheets 读取它们，但我很难弄清楚如何获取该元素的内容。

我了解 lesscss.js lib 使用没有 ajax get 调用。

发件人：http://lesscss.org/#using-less

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

我需要在页面中包含一些模板，并且越早加载越好，（而不是在加载 jquery 和 js 之后执行）

谢谢！

Answer 1

我明白你在 jquery 之前的意思。但是“在js之前”是什么意思。

当您加载 less.js（不依赖于 jQuery）时，浏览器会在 jquery 初始化之前运行 less.js。请注意，less.js 需要 JavaScript。

您可以利用XMLHttpRequest 读取此类文件的内容。可以在以下位置找到一个向您展示如何执行此操作的基本示例：How to show the compiled css from a .less file in the browser?

关于less.js，您可以在以下位置找到该文件的来源：https://github.com/less/less.js/blob/master/dist/less-1.7.4.js

我知道如果添加属性 type="text/css" 则可以使用 document.styleSheets 读取它们，但我很难弄清楚如何获取该元素的内容。

全局less.js 使用两个步骤来做到这一点：

1. 首先它会构建一个路径列表，如下所示：

   //
   // Get all <link> tags with the 'rel' attribute set to "stylesheet/less"
   //
   var links = document.getElementsByTagName('link');
   
   less.sheets = [];
   
   for (var i = 0; i < links.length; i++) {
       if (links[i].rel === 'stylesheet/less' || (links[i].rel.match(/stylesheet/) &&
          (links[i].type.match(typePattern)))) {
           less.sheets.push(links[i]);
       }
   }
   

2. 然后也使用XMLHttpRequest 读取这些文件的内容。请参阅 less-1.7.4.js 第 7720 行的 doXHR 函数。