动态加载javascript和css

 //动态加载js
function loadScript(url) {
	var script = document.createElement(‘script‘);
	script.type = ‘text/javascript‘;
	script.src = url;
	document.getElementsByTagName(‘head‘)[0].appendChild(script);
}

//动态加载css
function loadStyles(url) {
	var link = document.createElement(‘link‘);
	link.rel = ‘stylesheet‘;
	link.type = ‘text/css‘;
	link.href = url;
	document.getElementsByTagName(‘head‘)[0].appendChild(link);
}

//动态执行js
var script = document.createElement(‘script‘);
script.type = ‘text/javascript‘;
var text = document.createTextNode("alert(‘Lee‘)"); //IE 浏览器报错
try{
	script.appendChild(text);
}catch(e){
    script.text = "alert(‘Lee‘)"
}
document.getElementsByTagName(‘head‘)[0].appendChild(script);

//动态执行css
var style = document.createElement(‘style‘);
style.type = ‘text/css‘;
document.getElementsByTagName(‘head‘)[0].appendChild(style);
insertRule(document.styleSheets[0], ‘body‘, ‘background:red‘, 0);

function insertRule(sheet, selectorText, cssText, position) {
	if (sheet.insertRule) {//w3c
	    sheet.insertRule(selectorText + "{" + cssText + "}", position);
	} else if (sheet.addRule) {//ie
	    sheet.addRule(selectorText, cssText, position);
	}
}
时间: 2024-11-03 00:58:25

动态加载javascript和css的相关文章

动态加载js和css的jquery plugin

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. Java代码   //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files 

JS动态加载JS与CSS文件

JS动态加载JS与CSS文件 DEMO 一 HTML页面   jsforjscss.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"&

动态加载JavaScript

动态加载JavaScript减少不必要的文件加载,提高网页浏览速度 <!DOCTYPE html> <html><meta charset='utf8'><body> <input type='button' value='动态加载JavaScript' onclick='loadJS()'> </body><script> var htmlcollection=document.getElementsByTagName(

两种动态加载JavaScript文件的方法

两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看下 动态加载script到页面大约有俩方法 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<sc

动态加载javascript增强版

我们经常使用动态加载Javascript,写个函数很容易现实,之前也写过一个函数,不过当加载多个JS时,只能根据浏览器返回的顺序来先后加载,这肯定不是我们想要的,现在使用了一下技巧,当加载多个JS时,能按照我们的顺序加载: Js代码   /* Name:动态加载JS Author:kingwell Leng Date : 2013/4/21 E-mail: jinhua.leng##gmail.com */ function getScript(obj, callback) { var arr 

移动端性能优化动态加载JS、CSS

JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zepto || null, jQuery = jQuery || null, $ = Zepto || jQuery; var showLoading = false, isUsePackMode = false; // 是否使用合并模式,true则加载分页面合并的JS,CSS if (window.locati

js插件动态加载js、css解决方案

最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的变量,那就会报错,靠~~悲催了,就是说js如果动态加载(非浏览器加载因为浏览器加载时同步加载的会等待前一个js加载完成后才进行下一个js加载,这样就不会出现问题)那加载的文件是异步进行的,难怪啊!然后在网上找了些资料说用ajax同步加载,然后我试了真可以,下面就是我的代码分享出来给大家,但是注意这样

动态加载js、css 代码

一.原生js: 1 /** 2 * 加载js和css文件 3 * @param jsonData.path 前缀路径 4 * @param jsonData.url 需要加载的js路径或css路径 5 * @param jsonData.type 需要加载的类型 js或css 6 */ 7 function loadWriteFiles(jsonData) 8 { 9 jsonData.path = jsonData.path != undefined ? jsonData.path : "&q

动态加载js和css

var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; lin