js脚本能写jquary的变量(js实现动态加载脚本的方法实例汇总)

1.js实现动态加载脚本的方法实例汇总

本文实例讲述了js实现动态加载脚本的方法。

分享给大家供大家参考,具体如下:最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验。所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接。

哎!关键是最后一种方法还有点错误。经过两天的研究查阅资料,在这里和大家分享一下。

首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package。js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下。

方法一:直接document。write在同一个文件夹下面创建一个function1。

html,代码如下:通过document。 write的方式可以往页面写入脚本,如代码所示,点击按钮“初始化加载”后可以加载package。

js文件,但是立即运行里面的方法functionOne会找不到此方法,报告错误,而点击第二个按钮(通过document。write动态创建的“测试运行效果”)发现可以执行,此时脚本已经加载完毕了。

由于这种方式是异步加载(一边继续执行后面的代码,一边额外开一个线程执行需要加载的脚本),并且document。write会重写界面,明显不实用。

方法二:动态改变已有script的src属性在同一个文件夹下面创建一个function2。 html,代码如下:此种方法的好处在于不会改变界面元素,不至于重写界面元素,但是同样是异步加载,会有同样的问题。

方法三:动态创建script元素(异步)在同一个文件夹下面创建一个function3。 html,代码如下:此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签,缺点还是异步加载,存在同样的问题。

这三种方法都是异步执行的,所以在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。不过可以在functionOne前面加一个alert就可以堵塞一下主页面脚本的运行,然后你发现functionOne就可以运行了,或者你的后期代码需要在另一个按钮下执行,一步一步的来,要不就定义一个计时器,在固定时间后再执行后面的代码,不过在项目里面肯定不可能使用这些方法。

其实第三种方法改一点就变成同步加载了。方法四:动态创建script元素(同步)在同一个文件夹下面创建一个function4。

html,代码如下:此方法并没有加载外部的js文件,而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中,这些代码可以正常运行。

但是在IE8以及以下的版本中会导致错误。IE将 ActiveXObject只有IE里面才有,其他浏览器大部分支持XMLHttpRequest,通过此办法我们可以实现动态加载脚本了,不过是异步加载,也没法运行functionOne,第二次就可以运行了,但是可惜的是在IE、Firefox、Safari下可以运行,在Opera、Chrome下会出错,Chrome下的错误如下:不过只要发布之后在Chrome和Opera下就不会出现错误了。

其实这里把open里面设置为false就是同步加载了,同步加载不需要设置onreadystatechange事件。方法六:XMLHttpRequest/ActiveXObject同步加载 在这里我把一些情况考虑在内,写成了一个方法,封装为loadJS。

js,方便以后直接调用,代码如下: /** * 同步加载js脚本 * @param id 需要设置的 这种方式所有浏览器都支持,但是后面的代码必须放在回调函数里面,也就是异步加载了。 看需求使用把!我还是比较喜欢第六种方法的。

如果是异步加载的话,方法还有好几种,不过我的出发点是希望实现同步加载,这里就不对异步加载做总结了。希望本文所述对大家JavaScript程序设计有所帮助。

js脚本能写jquary的变量

转载请注明出处JS代码网 » js脚本能写jquary的变量(js实现动态加载脚本的方法实例汇总)

资讯

js中import的使用(javascript中的export和import怎么用)

阅读(20)

本文主要为您介绍js中import的使用,内容包括javascript中的export和import怎么用,Java中的import怎样使用?,Java中import的用法,以及类的种类已经定义了一个包Hum。export和import用于JavaScript的模块化操作。你可以在文件A.js中写好一些

资讯

html用js修改单条数据的样式(在jsp页面,日期选择框)

阅读(21)

本文主要为您介绍html用js修改单条数据的样式,内容包括html做的页面,如何用js来判断符合条件的数据并改变css样式,在jsp页面,日期选择框,js点击文本输入框在输入框下面弹出浮层当用户点击文本输入框的时候。做这个用控件吧,好做下载My97Date

资讯

js中的eval怎么使用(javascript的eval函数)

阅读(19)

本文主要为您介绍js中的eval怎么使用,内容包括js中的eval函数到底是干什么用的,javascript的eval函数,javascript中的eval函数的深入认识是什?javasc。eval()函数其实很简单,也很强大。它的作用就是把一串字符串当作语句去执行而已。比如你在

资讯

js中获取li的属性(JSP中Action属性的功能是什么?)

阅读(20)

本文主要为您介绍js中获取li的属性,内容包括js如何获取li的值,js获取li的id,请看清楚需求,只能给最外层的id=&quot?,JSP中Action属性的功能是什么?。1。 完整的action ﹤action path="/aFullAction"type="somePackage。someAction

资讯

js截取字符串的所有方法(在jsp页面,日期选择框)

阅读(17)

本文主要为您介绍js截取字符串的所有方法,内容包括javascript怎么截取字符串,js截取字符串问题:一个javascript字符串中可能有多个',在jsp页面,日期选择框。做这个用控件吧,好做 下载My97DatePicker4.8Beta3 http://www.my97.net/dp/dow

资讯

js浏览器的整体高度(js如何获得浏览器的高度)

阅读(20)

本文主要为您介绍js浏览器的整体高度,内容包括js如何获得浏览器的高度,js如何获取浏览器的高度?document.body.clien,怎么获取浏览器的宽度。要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后): outerHeight属性设置或返回一个窗口的

资讯

基于vue.js的前端界面(vuejs在前端开发起到什么作用)

阅读(21)

本文主要为您介绍基于vue.js的前端界面,内容包括vuejs在前端开发起到什么作用,如何前端Vue实现一个PC端/移动端兼备的网页,Web前端要敲会哪几种类型的页面?。jQuery的诸多局限性导致前端工程师的发展受到了很多的限制,只能做一些表面性

资讯

胜利tk15和js08的区别(i'm和sorry和apologize的区别)

阅读(20)

本文主要为您介绍胜利tk15和js08的区别,内容包括TK15和JS08相较哪个更合适,victor胜利羽毛球拍威克多tk15进攻版糖水拍js08速度版?,i'm和sorry和apologize的区别。区别是:从正式程度来说,sorry、 Im sorry、 apologize是从轻到重的关系

资讯

js中import的使用(javascript中的export和import怎么用)

阅读(20)

本文主要为您介绍js中import的使用,内容包括javascript中的export和import怎么用,Java中的import怎样使用?,Java中import的用法,以及类的种类已经定义了一个包Hum。export和import用于JavaScript的模块化操作。你可以在文件A.js中写好一些

资讯

html用js修改单条数据的样式(在jsp页面,日期选择框)

阅读(21)

本文主要为您介绍html用js修改单条数据的样式,内容包括html做的页面,如何用js来判断符合条件的数据并改变css样式,在jsp页面,日期选择框,js点击文本输入框在输入框下面弹出浮层当用户点击文本输入框的时候。做这个用控件吧,好做下载My97Date

资讯

js中的eval怎么使用(javascript的eval函数)

阅读(19)

本文主要为您介绍js中的eval怎么使用,内容包括js中的eval函数到底是干什么用的,javascript的eval函数,javascript中的eval函数的深入认识是什?javasc。eval()函数其实很简单,也很强大。它的作用就是把一串字符串当作语句去执行而已。比如你在

资讯

js中获取li的属性(JSP中Action属性的功能是什么?)

阅读(20)

本文主要为您介绍js中获取li的属性,内容包括js如何获取li的值,js获取li的id,请看清楚需求,只能给最外层的id=&quot?,JSP中Action属性的功能是什么?。1。 完整的action ﹤action path="/aFullAction"type="somePackage。someAction

资讯

jsblob支持的type(在jsp页面,日期选择框)

阅读(26)

本文主要为您介绍jsblob支持的type,内容包括jsblob对象存在newBlob([],{type:'image/png'})这句话报illgal,在jsp页面,日期选择框,JavaScript中typeof知多少。做这个用控件吧,好做下载My97DatePicker4.8Beta3http://www.my97.net/dp