JavaScript动态插入script的基本思路及实现函数_javascript技巧

在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是:

1、动态创建一个script标签,设置其src属性,type属性等

2、将script节点插入页面,加载js文件

即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现:

复制代码 代码如下:

// 动态插入script标签
function createScript(url, callback){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src = url;
/*
** script标签的onload和onreadystatechange事件
** IE6/7/8支持onreadystatechange事件
** IE9/10支持onreadystatechange和onload事件
** Firefox/Chrome/Opera支持onload事件
*/

// 判断IE8及以下浏览器
var isIE = !-[1,];
if(isIE){
alert('IE')
oScript.onreadystatechange = function(){
if(this.readyState == 'loaded' || this.readyState == 'complete'){
callback();
}
}
} else {
// IE9及以上浏览器,Firefox,Chrome,Opera
oScript.onload = function(){
callback();
}
}
document.body.appendChild(oScript);
}

使用方法如:

复制代码 代码如下:

createScript('xxx.js', function(){
console.log('OK');
});

时间: 2025-01-27 14:13:44

JavaScript动态插入script的基本思路及实现函数_javascript技巧的相关文章

javascript动态创建表格及添加数据实例详解_javascript技巧

本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

IE8中动态创建script标签onload无效的解决方法_javascript技巧

本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu

JavaScript动态改变HTML页面元素例如添加或删除_javascript技巧

可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

JavaScript动态创建link标签到head里的方法_javascript技巧

本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

javascript动态的改变IFrame的高度实现自动伸展_javascript技巧

动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1.在IFrame的具体页面(就是子页面),添加JavaScript 复制代码 代码如下: <script> function IFrameResize(){ //alert(this.document.body.scrollHeight); //弹出当前页面的高度 var obj = parent.document.getEle

javascript 动态数据下的锚点错位问题解决方法_javascript技巧

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title> <script language="javascript"> // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 //

javascript 动态修改css样式方法汇总(四种方法)_javascript技巧

在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

javascript动态判断html元素并执行不同的操作_javascript技巧

在javascript中为了针对不同的元素执行不同的操作,需要在javascript中对触发事件的元素进行判断,然后执行不同的操作. 例子: html 复制代码 代码如下: <input type='button' name='updatemetal' value='修改' onclick='getmetalid(this)'> <input type='button' name='deletemetal' value='删除' onclick='getmetalid(this)'>

js动态删除div元素基本思路及实现代码_javascript技巧

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) 复制代码 代