返回列表

关于的 <link rel="stylesheet" href="a.css"> 属性 crossorigin

默认分类 2017/05/10 02:15

问题描述:想写个小工具将当前页面用到了那些样式合并后导出,找了一下,没有满意的现成插件可用,于是决定自己动手写个小工具 (注:主要是 通过

<link rel="stylesheet" href="a.css" /> 
<style>.a {}</style>

引入的样式,这里不包括行内 style="" 定义的样式)

首先想到的是用 通过 styleSheets 来索引 用到的样式,因为之前写过一个动态插入样式的小工具 importCssString 查看 ,所以自然而然想到可以通过 document.styleSheets[0].cssRules 来遍历所有样式。

demo.html 文件代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
</head>
<body>
    <p class="a">.a</p>
</body>
</html>

a.css 文件代码如下:

.a {font-size: 23px;}
#b {font-size: 32px;}

本地起一个服务,将 a.com 映射到 127.0.0.1,访问 a.com/demo.html,在控制台运行以下代码能够成功输出当前页面引入的样式:

document.styleSheets[0].cssRules
>> CSSRuleList {0:....., length: 2;}

继续尝试将 a.css 改为从非当前域名,如 b.com/a.css,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//b.com/a.css">
</head>
<body>
    <p class="a">.a</p>
</body>
</html>

再次运行

document.styleSheets[0].cssRules
>> null

返回 null 猜测可能是跨域导致的,查阅资料 http://stackoverflow.com/questions/3211536/accessing-cross-domain-style-sheet-with-cssrules/6481457 进一步印证猜测属实,只能改 Access-Control-Allow-Origin,找到一款 Chrome 插件 https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj 可以方便修改 req 和 res

改了之后发现还是 是 null, 查了下,需要设置 crossorigin 属性, 继续修改代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" crossorigin href="//b.com/a.css">
</head>
<body>
    <p class="a">.a</p>
</body>
</html>

再次运行:

document.styleSheets[0].cssRules
>> CSSRuleList {0:....., length: 2;}

成功!!!

输出当前页面所有用到的样式:

var list = [];[].forEach.call(document.styleSheets, function(item1){ 
[].forEach.call(item1.cssRules, function(item2){ 
if (item2.selectorText && 
(document.querySelector(item2.selectorText) 
|| document.querySelector(String(item2.selectorText).replace(/(\:+after|\:+before)/ig, '')))) 
list.push(item2.cssText)})});list;