第二十四节：动态加载JS和动态加载CSS

最新推荐文章于 2023-03-13 18:24:16 发布

静静小白

最新推荐文章于 2023-03-13 18:24:16 发布

阅读量1.7k

点赞数

分类专栏： js学习整理文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43628158/article/details/122976579

版权

js学习整理专栏收录该内容

30 篇文章 4 订阅

订阅专栏

1、动态加载JS

一般需要用到js，需要将js放到<script></<script>中，一般script放到页面底部；或者在顶部引入外部js。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/jscript" src="js/flexible.js"></script>
	</head>
	<body>
	</body>
	<script>
	...
	</script>
</html>

使用JS的两种方式：

<script type="text/jscript" src="js/flexible.js"></script>
<script></script>

动态加载JS
①创建一个script标签
②将JS代码插入（远程js和文本形式插入两种），远程js会有一个时间差，称之为异步加载；需要callback回调函数，在js加载完成后执行回调方法；文本形式为同步加载，不需要回调方法。
③
什么是同步加载？什么是异步加载？
script的属性，h5新增async异步加载

//设置src，引入外部远程js，此时
function loadJS(url, callback) {
	var script = document.createElement('script');
	fn = callback || function() {};
	script.type = 'text/javascript';
	//IE 判断js是否执行完成
	if (script.readyState) {
		script.onreadystatechange = function() {
			if (script.readyState == 'loaded' || script.readyState == 'complete') {
				script.onreadystatechange = null;
				fn();
			}
		};
	} else {
		//其他浏览器，判断js是否执行完成
		script.onload = function() {
			fn();
		};
	}
	script.src = url;
	document.getElementsByTagName('head')[0].appendChild(script);
}
loadJS('js/flexible.js',function(){
    alert(1);
});

//在script内部插入js代码，内联<script>
var scriptM = document.createElement('script');
var jsHtml='var x=1;console.log(x);';
//scriptM.insertAdjacentText('afterbegin',jsHtml);
scriptM.innerHTML = jsHtml;
document.body.appendChild(scriptM);

注意：内联插入文本的写法IE会报错

Element.insertAdjacentText方法
Element.insertAdjacentText方法在相对于当前节点的指定位置，插入一个文本节点；第一个是一个表示指定位置的字符串，第二个是待解析的 HTML 字符串。

第一个参数的四个值：

beforebegin：当前元素之前
afterbegin：当前元素内部的第一个子节点前面
beforeend：当前元素内部的最后一个子节点后面
afterend：当前元素之后

//<p>Hello World</p>
var p1 = document.getElementsByTagName('p')[0];
p1.insertAdjacentText('beforebegin','标签前面');
p1.insertAdjacentText('afterbegin','标签内部前面');
p1.insertAdjacentText('beforeend','标签内部后面');
p1.insertAdjacentText('afterend','标签后面');
//结果：
//标签前面
//标签内部前面Hello World标签内部后面
//标签后面

加载与阻塞

如果使用src的方式加载js，设置src属性时，浏览器是不会发生请求的，只有当把script标签插入到文档当中（appendChild），插入完成之后浏览器才会下载这个文件，下载完会立即执行；当以字符串的形式插入script标签时，插入后会立即执行。

JS本身是一个阻塞形语言，对HTML而言，在JS下载和执行的时候是阻塞的。这就是为什么要把script标签放到文档底部的原因。如果放到文档顶部，浏览器一行一行解析HTML结构时，解析到script标签时就会停止，下载成功之后再执行，下载时其他都无法加载，只能等待JS的下载，所以称之为阻塞形语言。

动态加载JS时不会阻塞页面，但是执行时还是阻塞的。（这是由于浏览器的渲染造成的）

2、动态加载CSS

使用CSS的两种方式：

<link rel="stylesheet" type="text/css" href="css/newyear2.css">
<style>
...
</style>

注意：两种方式的标签是不同的，一个是link，一个是style；与动态加载JS略有不同

//外联样式
function loadCss(url){
	var link = document.createElement('link');
	link.type='text/css';
	link.rel='stylesheet';
	link.href=url;
	document.head.appendChild(link);
}
loadCss('css/newyear.css');

//页面样式
var style = document.createElement('style');
var bCss='.a{font-size:18px;color:#f00;}';
style.innerText=bCss;
document.head.appendChild(style);

动态加载JS与CSS的区别和注意点：
①动态加载JS创建的script标签可以插入到页面中的任何位置；CSS创建的link标签和style标签最好插入到head标签中（以免不同浏览器的解析不同造成不一样的结果）。
②动态加载JS创建的标签均为script标签；动态CSS外联用link标签，内联用style标签。
③JS加载完成之后，运行完成后，相关事件已执行完成，此时删除插入的script标签对整个网页没有任何影响（浏览器的js解释器是靠js解释器来完成的）；（CSS的解析靠浏览器的渲染器进行完成）渲染器是一个实时更新的机制，所以删除或者修改会直接影响页面样式。
④动态加载CSS可以直接修改href来实现页面样式的修改，例如一些网站的主题修改，通过切换CSS样式即可实现；但是script修改src是无效的。

静静小白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第二十四节：动态加载JS和动态加载CSS

1、动态加载JS一般需要用到js，需要将js放到<script></<script>中，一般script放到页面底部；或者在顶部引入外部js。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/jscript" src="js/flexible.js">&
复制链接

扫一扫