动态加载、移除js/css文件的示例代码

 更新时间:2018年03月20日 09:53:41   作者:dongsdh  
本文简单介绍动态加载、移除、替换js/css文件的示例代码,代码简单易懂,非常不错,具有参考借鉴加载,需要的朋友参考下吧

本文简单介绍动态加载、移除、替换js/css文件 。有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率。下面贴出代码。

 <script language="JavaScript">
//动态加载一个js/css文件
function loadjscssfile(filename, filetype){
if (filetype=="js"){
varfileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src",filename)
}
else if (filetype=="css"){
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>

使用示例:

loadjscssfile("myscript.js","js")
loadjscssfile("javascript.PHP","js")
loadjscssfile("mystyle.css","css")
<scriptlanguage="javascript">
//移动已经加载过的js/css
function removejscssfile(filename,filetype){
vartargetelement=(filetype=="js")? "script" :(filetype=="css")? "link" : "none"
var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none"
varallsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0;i--){
if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
 allsuspects[i].parentNode.removeChild(allsuspects[i])
}
}
</script>

 使用示例:

removejscssfile("somescript.js","js")
removejscssfile("somestyle.css","css")

总结

以上所述是小编给大家介绍的动态加载、移除js/css文件的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript如何借用构造函数继承

    JavaScript如何借用构造函数继承

    这篇文章主要介绍了JavaScript如何借用构造函数继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 详解JavaScript如何创建一个非自动播放的GIF网络组件

    详解JavaScript如何创建一个非自动播放的GIF网络组件

    这篇文章主要为大家介绍了如何利用JavaScript创建一个允许您的用户决定是否要播放gif的Web组件,文中的实现步骤讲解详细,需要的可以参考一下
    2022-02-02
  • JS实现可点击展开与关闭的左侧广告代码

    JS实现可点击展开与关闭的左侧广告代码

    这篇文章主要介绍了JS实现可点击展开与关闭的左侧广告代码,通过鼠标onClick事件调用自定义javascript函数实现页面元素及样式的显示与隐藏效果,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • JavaScript函数的一些注意要点小结及js匿名函数

    JavaScript函数的一些注意要点小结及js匿名函数

    本文给大家总结了javascript函数的一些注意要点及js匿名函数,主要知识点有:函数的基本语法、函数的参数、函数的重载相关知识,对本文感兴趣的朋友一起学习吧
    2015-11-11
  • webpack教程之webpack.config.js配置文件

    webpack教程之webpack.config.js配置文件

    本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ,具有一定的参考价值,有兴趣的可以了解一席
    2017-07-07
  • 基于JavaScript实现前端数据多条件筛选功能

    基于JavaScript实现前端数据多条件筛选功能

    这篇文章主要为大家详细介绍了基于JavaScript实现前端数据多条件筛选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JS简单去除数组中重复项的方法

    JS简单去除数组中重复项的方法

    这篇文章主要介绍了JS简单去除数组中重复项的方法,涉及javascript针对数组的遍历、判断与运算相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • Js+Flash实现访问剪切板操作

    Js+Flash实现访问剪切板操作

    最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
    2012-11-11
  • 使用JavaScript实现链表的数据结构的代码

    使用JavaScript实现链表的数据结构的代码

    链表(Linked list)是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现
    2017-08-08
  • JS+CSS实现大气清新的滑动菜单效果代码

    JS+CSS实现大气清新的滑动菜单效果代码

    这篇文章主要介绍了JS+CSS实现大气清新的滑动菜单效果代码,通过鼠标事件结合定时函数实现页面元素动态变换的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论