`
snoopy_liu
  • 浏览: 2395 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

动态加载外部js和css

阅读更多
基本原理:
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=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)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

注意点:
默认挂在dom的第一个节点下,要保证不影响原有的页面的逻辑。
防止重复加载。
var filesadded="" //list of files already added

function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
  loadjscssfile(filename, filetype)
  filesadded+="["+filename+"]" //List of files added in the form "[filename1],[filename2],etc"
}
else
  alert("file already added!")
}

checkloadjscssfile("myscript.js", "js") //success
checkloadjscssfile("myscript.js", "js") //redundant file, so file not added
分享到:
评论

相关推荐

    load.js:动态加载外部JavaScript和CSS文件

    动态加载外部JavaScript和CSS文件 安装 npm install load.js 如何使用? const load = require ( 'load' ) ; /* you could use jquery functions here */ await load . js ( 'jquery.js' ) ; /* load menu css and...

    vue动态加载外部依赖js代码实现

    ### Vue动态加载外部JS代码实现 #### 概述 在前端开发中,有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时,可能会遇到需要按需加载某些功能的情况,例如第三方库、API接口等。...

    js 动态引用外部js,css文件

    动态引用外部JS和CSS文件是提升网页加载效率和灵活性的一种常见技术。下面将详细介绍这个知识点。 首先,我们理解静态引用和动态引用的区别。静态引用通常在HTML文档中通过`<script>`和`<link>`标签完成,例如: `...

    unigui_调用外部js与css

    本主题聚焦于如何在Unigui项目中调用外部JavaScript(js)和样式表(css)资源,这对于扩展功能、引入第三方库或者实现自定义样式是必要的。 首先,理解Unigui的基础架构是关键。Unigui基于Vue.js,Vue.js是一个...

    webview 加载js ,css

    下面我们将深入探讨如何在Android的WebView中加载和使用JS、CSS以及它们带来的优势。 1. Android WebView加载HTML Android的WebView可以通过调用`loadData()`或`loadDataWithBaseURL()`方法加载HTML字符串,或者...

    动态加载js和css(外部文件)

    本文将详细介绍如何动态加载外部js文件和css样式。 首先,要实现动态加载外部js文件,可以通过创建一个新的`<script>`元素,并将其`src`属性设置为目标js文件的URL。之后,将这个`<script>`元素插入到页面的`<head>...

    unigui_调用外部js与css_左侧导航栏

    总之,理解如何在Unigui中调用外部JS和CSS以及构建导航栏是提升应用功能性和用户界面的关键技能。通过合理地组合和配置这些元素,开发者可以创建出既美观又功能丰富的Web应用。在这个“unigui_调用外部js与css_左侧...

    unigui_调用外部js与css.rar

    本资源"unigui_调用外部js与css.rar"显然关注的是如何在Unigui应用中集成和使用外部JavaScript和CSS文件,这两个元素对于现代Web界面的设计和交互至关重要。 JavaScript(JS)是一种广泛用于网页和网络应用的脚本...

    JS和CSS和C++互相调用

    此外,JS还可以通过CSSOM(CSS对象模型)加载、解析和修改外部CSS文件。 2. **JS与C++交互**:在浏览器环境中,JS引擎通常由C++编写,因此在引擎内部,JS与C++有着紧密的联系。不过,对于开发者来说,直接的C++和JS...

    动态加载外部CSS与JS文件

    动态加载外部CSS与JS文件是一种优化网页性能的技术,它允许我们在网页加载时按需加载资源,从而提升用户体验。这种技术通常用于大型应用或响应式设计,以减少初始页面加载时间,尤其是在用户网络环境不佳时。 首先...

    动态添加css或js链接

    在Web开发过程中,我们经常会遇到需要动态加载样式表(CSS)或脚本(JavaScript)的情况。这种方式不仅能够提高页面的加载速度,还可以实现更加灵活的功能。本文将详细介绍如何在ASP.NET Web Forms中动态添加CSS或JS...

    asp.net后台代码动态引用添加JS和css文件

    在ASP.NET开发中,动态引用和添加JS及CSS文件是一项常用且重要的技能,尤其是在需要根据运行时条件加载不同样式或脚本的情况下。本文将详细解析如何在ASP.NET后台代码中实现这一功能,确保网页能够根据实际需求灵活...

    动态加载外部css或js文件

    动态加载外部CSS或JS文件是一种优化网页性能的技术,它允许我们在网页加载过程中按需加载资源,从而提升用户体验。这种技术的核心在于使用JavaScript的DOM(Document Object Model)操作,动态创建`<script>`或`...

    unigui_调用外部js与css (1).rar

    这个"unigui_调用外部js与css (1).rar"文件很可能包含了关于如何在Unigui应用中集成和调用外部JavaScript和CSS文件的示例或教程。 首先,让我们来深入了解一下如何在Unigui中引入外部CSS文件。CSS(层叠样式表)...

    JavaScript动态生成css

    除了直接操作`<style>`元素,还可以动态加载外部CSS文件。通过创建`<link>`元素并设置`href`属性指向CSS文件,可以实现动态引入CSS: ```javascript let link = document.createElement('link'); link.rel = '...

    javascript 动态加载 css 方法总结

    ### 使用@import加载外部CSS文件 在CSS文件中,可以使用`@import`规则来导入另一个CSS文件。这种方法适用于CSS内部导入外部样式表,而非在JavaScript中使用。示例如下: ```css @import url(style.css); ``` 需要...

    一个简单的动态加载js和css的jquery代码

    此外,文档中还提到了另一种方法,即通过定义一个`loadjscssfile`函数来实现动态加载外部JavaScript和CSS文件的功能,该方法直接使用原生JavaScript操作DOM,创建相应的`<script>`或`<link>`标签,并将其添加到页面...

    CSS技术和JavaScript技术

    CSS技术和JavaScript技术 CSS技术是用于控制网页样式的语言,主要用于设置网页的布局、颜色、字体、背景图片等样式。CSS技术分为三种类型:内联样式、内部样式和外部样式。内联样式是将样式直接写在HTML标签中,...

    apache模块 合并多个js/css 提高网页加载速度

    在现代网页设计中,为了实现复杂的功能和美观的界面,通常会引入大量的外部js和css文件。然而,每次浏览器请求一个文件都会增加一次HTTP请求,这在一定程度上拖慢了页面加载时间。通过mod_concatx模块,我们可以将...

Global site tag (gtag.js) - Google Analytics