JavaScript-两种JavaScript动态加载脚本的区别?

JavaScript-两种JavaScript动态加载脚本的区别?

归属感 发布于 2017-04-21 字数 1233 浏览 1158 回复 2

在动态加载JavaScript外部文件时,可以用createElement()方法加载和直接document.write()方法加载<script>标签,但是如以下代码用createElement加载里就会报错,用document.write()就不报错,请说明是什么原因?以及他们之间有什么区别?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

</head>

<script type="text/javascript">
function load(js){
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',js);
var head = document.getElementsByTagName('head');
head[0].appendChild(s);
}

function write(js){
document.write('<script type="text/javascript" src="'+js+'" > </script>');
}

//用load()报错
//load("http://www.oschina.net/js/2011/jquery-1.5.1.min.js");
//用write()不会报错
//write("http://www.oschina.net/js/2011/jquery-1.5.1.min.js");

</script>

<script>
alert($);

</script>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

甜柠檬 2017-10-04 2 楼

运行你的代码确实存在这个的问题。。

简单的说,第一种方式报错就是js没有加载完。

两种方式确实都可以动态加载脚本,至于区别就在于第一种加载不会阻塞整个页面的的加载,其实就想当与 var im = new Image(); im.src ='xxx.jpg'; alert(im.height) 输不出值,或者值不正确 道理一样,只有 im.onload = function(){alert(im.height)} 才可以输出,可以理解为 异步加载。同样的只有js加载完成才可以 alert($);

那么 document.write('<script type="text/javascript" src="'+js+'" > </script>') 这样写的话,只有这个js加载完成页面才会继续渲染。。

夜无邪 2017-06-08 1 楼

<script type="text/javascript">
function load(js){
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',js);
var head = document.getElementsByTagName('head');
head[0].appendChild(s);
}

function write(js){
document.write('<script type="text/javascript" src="'+js+'" > </script>');
}

//用load()报错
//load("a.js");
//用write()不会报错
write("a.js");

</script>

a.js

var statisNotice = {
'CS_STATIS_TXT_TITLE1':'大苏打',
'CS_STATIS_TXT_TITLE2':'撒大声地'
};
alert(statisNotice['CS_STATIS_TXT_TITLE1']);

我在ie和火狐下都测试了没有报错,我加载的js是本地的,会不会是网络原因导致加载没有完成或你加载的js和你页面编码不同造成的呢,若是加载问题你可以把js下到本地后再加载。