当前位置: 首页 > 工具软件 > JsHtml > 使用案例 >

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

艾阳羽
2023-12-01

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是无效的。

 类似资料: