动态载入CSS的两种方法

╰半夏微凉° 2024-04-03 13:25 47阅读 0赞

![ccf88a940c3a31703d61ec179e3a5912.jpeg][]

1.通过 文档对象创建 link节点,指定 href,然后 appendChild到页面.

这种方案大家都用过, 不过,会存在一些问题.什么问题呢?! 跨域

案例:FF下打开baidu, [Firebug][]下运行以下代码(没有firebug,就去装一个,挺好用的)

程序代码

var link = document.createElement("link");

link.rel = "[stylesheet][]";

link.type = "text/css";

link.href = "http://img9.mapbar.com/web/localsearch/version-3.4.5/mapbar.ls.all-min.css";

document.getElementsByTagName("head")\[0\].appendChild(link);

然后呢,在baidu搜索框中点一下,竟然报错:

Security error" code: "1000

安会域错误, 原因就是点击输出框后 baidu页面的JS会对 styleSheet操作, 而这个styleSheet引用于非 baidu域名, 当然不能写了.

找问题,解决问题搞了天!

2.将要载入的CSS文本定义成 JS文件, 通过 script载入文本数据, 将文本写入styleSheet

动态创建的script标签载入JS变量可以解决跨域, 真是屡试不爽, IE,FF测试正常.

两部分代码如下:

读取JS,相信大家都会

程序代码

loadCSSStyle = function(url)\{

url = "http://192.168.1.90:8000/js\_2\_css.js";

var head = document.getElementsByTagName("head")\[0\];

var script = document.createElement("script");

var thisAim = this;

script.src = url;

script.onload = script.onreadystatechange = function(arg)\{

if(!script.readyState||script.readyState=="loaded"||script.readyState=="complete")\{

//JS文件是这么写的 var JS\_TO\_CSS="body\{........无限长的内容..... \}";

var a = window\["JS\_TO\_CSS"\];

if(a)\{

setStyleText(a);

\}

\}

\};

head.appendChild(script);

\};

以下是将文本写入CSS的代码, (网上抄的)

程序代码

var setStyleText = function(str)\{

var doc = document;

var h = doc.getElementsByTagName("head")\[0\];

if(!h)return;

var style = h.getElementsByTagName("style");

var cStyle;

if (style.length == 0) \{

if(doc.createStyleSheet)\{//FF

doc.createStyleSheet();

\}else\{

cStyle = doc.createElement("style");

cStyle.setAttribute("style","text/css");

h.appendChild(cStyle);

\}

\}

var tStyle = style\[0\];

if (tStyle.styleSheet) \{

tStyle.styleSheet.cssText +=str;

\} else \{

if (doc.getBoxObjectFor) \{

tStyle.innerHTML += str;

\} else \{

tStyle.appendChild(doc.createTextNode(str));

\}

\}

\};

供大家参考.虽然感觉有点别扭,呵呵....要跨域读静态文本,大家还有何高见, 欢迎赐教!

来源：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[ccf88a940c3a31703d61ec179e3a5912.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/533177eea05542439c6d8943c44c7d8b.jpeg
[Firebug]: https://so.csdn.net/so/search?q=Firebug&spm=1001.2101.3001.7020
[stylesheet]: https://so.csdn.net/so/search?q=stylesheet&spm=1001.2101.3001.7020
[Link 1]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关如何动态载入CSS

动态载入CSS的两种方法 1.通过文档对象创建 link节点,指定 href,然后 appendChild到页面. 这种方案大家都用过, 不过,会存在一些问题.什么问

我就是我/ 2024年04月03日 14:13/ 0 赞/ 43 阅读

相关动态载入CSS的两种方法

![ccf88a940c3a31703d61ec179e3a5912.jpeg][] 1.通过文档对象创建 link节点,指定 href,然后 appendChild到页面

╰半夏微凉°/ 2024年04月03日 13:25/ 0 赞/ 48 阅读

相关动态载入bean的工具类

/ 动态载入bean的类调用例子 PlayerService playerService = (PlayerService)Bea

秒速五厘米/ 2022年12月22日 12:28/ 0 赞/ 91 阅读

相关 c++动态申请空间的两种方法

c++动态申请空间的两种方法第一种使用二重指针(下面以int类型为例子) int res=new int[row]; for(int i=0

╰半橙微兮°/ 2022年12月05日 15:11/ 0 赞/ 139 阅读

相关动态调用动态库函数的两种方法

动态调用动态库函数的两种方法 include <dlfcn.h> //dllopen void dllhandle_; char dlle

喜欢ヅ旅行/ 2022年10月27日 13:44/ 0 赞/ 153 阅读

相关详解react的两种动态改变css样式的方法

第一种：动态添加class，以点击按钮让文字显示隐藏为demo 1 2 3 4 5 6 7 8 9 10 11 12 13

Bertha 。/ 2022年10月15日 00:43/ 0 赞/ 165 阅读

相关 java动态代理的两种实现方法

AOP的拦截功能是由java中的动态代理来实现的。说白了，就是在目标类的基础上增加切面逻辑，生成增强的目标类（该切面逻辑或者在目标类函数执行之前，或者目标类函数执行之后，或者在

秒速五厘米/ 2022年06月07日 09:42/ 0 赞/ 167 阅读

相关 Java动态代理的两种实现方法

转载自 http://blog.csdn.net/HEYUTAO007/article/details/49738887 AOP的拦截功能是由java中的动态代理来实现的。

落日映苍穹つ/ 2022年06月01日 13:40/ 0 赞/ 152 阅读

相关 webpack4打包多个css的两种方法

demo目录： ![70][] 1.将css打包到js内部配置文件./conf/webpack.dev.js: const path = require("p

桃扇骨/ 2022年05月19日 03:23/ 0 赞/ 529 阅读

相关 javascript动态添加select的option两种方法

!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <scri...

小灰灰/ 2021年02月05日 02:14/ 0 赞/ 752 阅读