`

动态加载css和java script

    博客分类:
  • web
阅读更多
var portalLoader = {
	dojo : {
		url:"/Dojo/dojo-release-1.6.1/"
	},
	call : (function() {
		function hasFile(tag, url) {
			var contains = false;
			var files = document.getElementsByTagName(tag);
			var type = tag == "script" ? "src" : "href";
			for ( var i = 0, len = files.length; i < len; i++) {
				if (files[i].getAttribute(type) == url) {
					contains = true;
					break;
				}
			}
			return contains;
		}

		function fileExt(url) {
			var att = url.split('.');
			var ext = att[att.length - 1].toLowerCase();
			return ext;
		}

		function loadFile(element, callback, parent) {
			var p = parent && parent != undefined ? parent : "head";
			var h = document.getElementsByTagName(p)[0];
			h.appendChild(element);
			if (callback) {
				callback();
			}
		}
		
		function loadCssFile(files, callback) {
			var urls = files && typeof (files) == "string" ? [ files ] : files;
			for ( var i = 0, len = urls.length; i < len; i++) {
				var cssFile = document.createElement("link");
				cssFile.setAttribute('type', 'text/css');
				cssFile.setAttribute('rel', 'stylesheet');
				var filePath = portalLoader.dojo.url + urls[i];
				cssFile.setAttribute('href', filePath);
				if (!hasFile("link", filePath)) {
					loadFile(cssFile, callback);
				}
			}
		}		

		function loadScript(files, callback, parent) {
			var urls = files && typeof (files) == "string" ? [ files ] : files;
			for ( var i = 0, len = urls.length; i < len; i++) {
				var script = document.createElement("script");
				script.setAttribute('type', 'text/javascript');
				var filePath = portalLoader.dojo.url + urls[i];
				script.setAttribute('src', filePath);
				if (!hasFile("script", filePath)) {
					loadFile(script, callback, parent);
				}
			}
		}		

		function toArray(obj) {
			if (obj.length == null)
				return new Array(obj);
			else
				return obj;
		}

		function tryToArray(obj) {
			try {
				return toArray(obj);
			} catch (e) {
				try {
					return obj.split(",");
				} catch (e) {
					return obj;
				}
			}
		}
		
		function includeFile(options) {
			if (options) {
				var cssFiles = tryToArray(options.css);
				var scriptFiles = tryToArray(options.script);

				loadCssFile(cssFiles, function() {
					//loadScript(scriptFiles, null, "body");
					loadScript(scriptFiles);
				});
			}
		}
		
		return {
			require : includeFile
		};
	})()
};

var require = function(options) {
	portalLoader.call.require(options);
};

 

<script type="text/javascript" src="js/portalLoader.js"></script>

<script type="text/javascript">
	require({         
		css:["dojo/resources/dojo.css","dijit/themes/tundra/tundra.css"],        
		script:["dojo/dojo.js"]    
	});
</script>

 

分享到:
评论

相关推荐

    Ajax Css html java script

    在Ajax应用中,CSS用于美化动态加载的内容,确保更新的元素与原有页面风格一致。 **XML** XML(Extensible Markup Language)是一种用于存储和传输数据的标记语言,结构严谨且可扩展。在Ajax中,XML有时被用来作为...

    Java script特效网页制作

    在这个"Java Script特效网页制作"的主题中,我们将深入探讨如何利用JavaScript为网页增添动态效果,提升用户体验。 首先,JavaScript的核心在于它的事件驱动特性,通过监听用户的交互行为,如点击、滚动、输入等,...

    基于java+script+ajax+css完整工程(均调试可运行)01

    在本项目"基于Java+Script+Ajax+Css完整工程(均调试可运行)01"中,我们将探讨几个核心的Web开发技术,包括Java、JavaScript、Ajax以及CSS,它们共同构建了两个实际运行的Web应用:Register和DynaCheckRegister。...

    java script图片切换

    本教程主要探讨如何使用JavaScript实现网页中的动态图片切换效果,让页面更加生动有趣。 首先,我们需要理解图片切换的基本原理。通常,我们可以创建一个包含多张图片的数组,并利用定时器(setTimeout 或 ...

    html与Java Script

    4. CSS操作:JavaScript可以动态修改元素的CSS样式,实现动画效果和响应式设计。 5. Web API:如WebSocket用于实时双向通信,Fetch API用于异步数据请求,Geolocation API获取地理位置等。 总结,HTML与JavaScript...

    Java Script 经典教程(五)——JavaScript几段特效

    在"Java Script 经典教程(五)——JavaScript几段特效"中,我们将深入探讨如何利用JavaScript为网页添加各种动态效果,提升用户体验。 1. **DOM操作**:DOM(Document Object Model)是HTML或XML文档的结构化表示...

    Java Script精彩实例教程

    5. **CSS操作**:JavaScript可以访问和修改网页的样式,例如动态更改颜色、大小或位置,实现更复杂的动画效果。 6. **浏览器兼容性**:JavaScript在不同的浏览器上可能有不同的行为,因此了解如何使用polyfill或者...

    Java script 特效大全

    1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作网页元素,实现动态更新、添加或删除页面内容。DOM API允许我们选择特定的元素,改变其属性,甚至创建新的元素。 2. **事件处理**:JavaScript...

    国内外 Java Script 经典封装

    在这份“国内外 Java Script 经典封装”资源中,我们能看到开发者们通过封装来提升代码复用性和效率的14种经典案例。封装是编程中的一个重要概念,它能帮助我们将复杂的功能模块化,使得代码更易于理解和维护。 1. ...

    java script

    2. **CSS链接**:文件夹`css`包含样式表文件,JavaScript可以用来动态地加载、修改或删除这些CSS样式,通过正则表达式匹配和处理CSS类名或选择器,实现动态主题切换或响应式布局。 3. **图片资源管理**:`images`...

    java script 2D时钟+源码

    通过理解这些基本概念,你可以自己创建一个简单的JavaScript 2D时钟,也可以根据提供的源码进行学习和扩展,例如添加动画效果,使指针平滑转动,或者添加更多自定义功能,如调整时钟颜色、大小等。JavaScript 2D时钟...

    Java script 各类特效大全

    "Java Script各类特效大全"涵盖了JavaScript在网页开发中的各种应用,包括但不限于以下几大类: 1. 图片特效:JavaScript可以实现图片的动态加载、轮播、缩放、旋转、淡入淡出等效果。例如,可以使用JavaScript创建...

    java script例子

    这个“java script例子”压缩包文件提供了一个初级学习者的入门资源,包含了从基础到进阶的1-5章的学习资料,旨在帮助初学者快速掌握JavaScript的核心概念。 首先,我们从第一章开始。这一章通常会介绍JavaScript的...

    java script css ajax xml api 集合

    JavaScript、CSS、AJAX、XML和API是Web开发中的核心技术,它们共同构建了现代网页交互性和数据交换的基础。下面将分别对这些技术进行详细解释,并探讨它们如何协同工作。 **JavaScript** 是一种轻量级的脚本语言,...

    使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明。 希望下面的方法对你有帮助。 (1)使用JavaScript动态加载Js文件 /*JavaScript动态...

    javascript 动态加载 css 方法总结

    JavaScript 动态加载 CSS 是网页开发中一种常用的技术,它允许开发者在运行时根据需要引入 CSS 文件,提高页面性能和用户体验。以下是对标题和描述中所述知识点的详细说明: 1. **@import 语句**: 在 CSS 文件中...

    Servlet+JSP(有Java Script脚本语言)分页操作Oracle部门、职员表(增删改查)

    在IT行业中,Servlet和JSP是Java Web开发中不可或缺的部分,它们主要用于构建动态网页应用程序。在这个项目中,我们将深入探讨如何使用Servlet、JSP以及JavaScript实现Oracle数据库中的部门和职员表的增删改查(CRUD...

    Java script tree的源代码

    6. **API 设计**:为了方便开发者集成和控制树,源码会提供一套 API,包括初始化树、添加/删除节点、获取选中节点等方法。 7. **可配置性**:JavaScript Tree 库通常允许开发者自定义样式、图标、行为等,这通过...

Global site tag (gtag.js) - Google Analytics