动态加载JS文件的三种方法

2013-12-05  来源:本站原创  分类:javascript技巧  人气:4 

动态加载JS文件的三种方法

直接看实例。
例1 重新加载js文件

function loadJs(file) {
            var head = $("head").remove("script[role='reload']");
            $("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 'reload', src: file, type: 'text/javascript' }).appendTo(head);
}

例2 重新载入javascript文件的方法(给js定个id),自己封装成一个方法方便大家使用:


复制代码 代码如下:

function reloadAbleJSFn(id,newJS)
{
var oldjs = null;
var t = null;
var oldjs = document.getElementById(id);
if(oldjs) oldjs.parentNode.removeChild(oldjs);
var scriptObj = document.createElement("script");
scriptObj.src = newJS;
scriptObj.type = "text/javascript";
scriptObj.id   = id;
document.getElementsByTagName("head")[0].appendChild(scriptObj);
}

例3 jquery的就直接使用getScript就可以了。


复制代码 代码如下:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的,当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
相关文章
  • 动态加载JS文件的三种方法 2013-12-05

    动态加载JS文件的三种方法 直接看实例. 例1 重新加载js文件 function loadJs(file) { var head = $("head").remove("script[role='reload']"); $("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 'reload', src: file,

  • 动态加载script文件的两种方法 2013-10-16

    第一种就是利用ajax方式,第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页面head来加载js,感兴趣的朋友可以了解下 动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页面head来加载js,相当于在head中写了一个<script src="..."

  • javascript中动态加载js文件多种解决办法总结 2014-07-06

    这篇文章主要介绍了javascript中动态加载js文件多种解决办法,有需要的朋友可以参考一下 一个比较全部在动态加方法 /* 动态加载js v1.0 by:dum 用法:src="webJsBase.js?load=a,b" 注:加载本目录下js */ var webJsBase = { require: function(libraryName) { document.write('<script type="text/javascript" src=&q

  • 使用jquery动态加载js文件的方法 2014-09-23

    这篇文章主要介绍了使用jquery动态加载js文件的方法,需要的朋友可以参考下 方法很简单,这里就不多废话了,直接奉上代码: $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|

  • JS获取浏览器语言动态加载JS文件示例代码 2014-11-03

    通过获取浏览器语言版本,来相对的加载easyui语言包就是动态加载JS文件,下面有个不错的实例,大家可以看看 项目出于多语言版本的考虑,前台使用easyui,通过获取浏览器语言版本,来相对的加载easyui语言包,easyui默认语言包en-US 代码如下 <script type="text/javascript"> //ie if (navigator.browserLanguage != "undefined" && navigat

  • 动态加载JS文件 2013-05-31

    仿AJAX的动态加载数据的JS函数,支持回调函数. function loadjs(url,callback){ var head = document.getElementsByTagName("head")[0]; var script = document.createElement('script'); script.onload = script.onreadystatechange = script.onerror = function (){ if (script &am

  • jQuery页面加载初始化常用的三种方法 2015-03-27

    当页面打开时我们需要执行一些操作,下面为大家介绍三种不错的方法,大家可以参考下 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: <script type="text/javascript" src="./js/jquery-1.7.min.js"></script> 复制代码 代码如下: <script type=&

  • 异步动态加载js与css文件的js代码 2014-10-29

    这篇文章介绍了异步动态加载js与css文件的几种方法,有需要的朋友可以参考一下 jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 复制代码 代码如下: function loadjs(file){ var head = $('head').remove('#loadscript'); $("<scri"+"pt>"+"</scr

  • 如何使用jquery动态加载js,css文件实现代码 2014-07-01

    在jquery中要实现动态加载js文件的方法有很多种,最简单的我们可以直接利用$.include()方法来实现,感兴趣的朋友可以参考下哈 使用jquery动态加载js,css文件 $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var na

  • ie下动态加态js文件的方法 2013-11-16

    接触过相关知识的都知道,动态向DOM中添加js的script标签时,在各种浏览器下会有不同的表现. 这里只讨论支持并行下载的浏览情况,大致分为两种,一种是按加向DOM树中加的顺序执行,另一种按下载完成的先后顺序执行:这样如果js文件间有依赖关系的话,且是按下载顺序执行,且在没有缓存的情况下就会报错(通常的情况下第一次执行会报错,http返回状态200,如果缓存未禁用,http状态是304,就不会报错了) 而ie就是按http下载完成的先后顺序执行js代码的,首先看下面的代码: <!DOCTYPE

  • 如何通过JavaScript动态加载js 2014-04-10

    在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载.于是,我们有了通过js动态加载js文件的需求.下面提供一种方案. 方法比较简单,具体实例详见代码: 文件1:demo.js function demo(){ alert("demo"); } 文件2:test.js function test(){ alert("test"); } functio

  • 三种动态加载js的jquery实例代码另附去除js方法 2013-11-15

    这篇文章主要介绍了三种动态加载js的jquery实例代码另附去除js方法,需要的朋友可以参考下 !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.o

  • jquery动态加载js三种方法实例 2014-03-06

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\");就OK了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

  • 动态加载js和css(外部文件) 2014-01-24

    本文详细介绍下,如何动态加载外部js文件及js:动态加载外部css样式及css样式,感兴趣的朋友可以参考下哈,希望对你学习js有所帮助 // 动态加载外部js文件 var flag = true; if( flag ){ loadScript( "js/index.js" ); }; function loadScript( url ){ var script = document.createElement( "script" ); script.type = &

  • jquery动态加载js/css文件方法(自写小函数) 2014-04-03

    jquery自带的getSrcript文件只能动态加载js代码,但不能加载css,后来自己写了一个可加载js与css的程序 先来看jquery自带的getSrcript文件 方法 $.getScript(url,callback) 实例 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); }

  • 动态加载js.css等文件跨iframe实现 2015-03-23

    这篇文章主要介绍了动态加载js.css等文件跨iframe实现的方法,需要的朋友可以参考下 1.动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式调用同级 parent.parentFram("这个方法在调用其他子farme"); 1.jquery的append() 速

  • js加载之使用DOM方法动态加载Javascript文件 2015-05-03

    传统上,加载Javascript文件都是使用script标签,我们也可以使用DOM方法,动态加载Javascript文件,具体实现如下,感兴趣的朋友可以参考下 传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行

  • 动态加载js的方法汇总 2013-10-07

    这篇文章主要介绍了动态加载js的方法,实例汇总了常见的几种动态加载技巧,非常具有实用价值,需要的朋友可以参考下 本文实例汇总了动态加载js的方法.分享给大家供大家参考.具体如下: 方法一:直接document.write(异步) <script language="javascript"> document.write("<script src='res/extwidget/echarts/xx.js'><\/script>");

  • 一个简单的动态加载js和css的jquery代码 2014-05-31

    动态加载js和css的jquery,可用于在生成页面时通过js函数加载一些共通的js和css文件,需要的朋友可以参考下 一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['aj

  • jquery getScript动态加载JS方法改进详解 2014-12-26

    有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛? 于是找到Jquery官网的API说明 http://api.jquery.co