动态加载js,css(项目中需要的)

最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了。

那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面配置的域名是正式服的域名,但是却检测到了我测试服的访问量,这就尴尬了,然后就想到了动态加载js

1.动态加载js文件

我们要把这块链接加入页面

<script src="js/count.js"></script>

具体代码实现如下

function loadJs(url){
	var script = document.createElement("script");
	script.type="text/javascript";
	script.src=url;
	document.body.appendChild(script);
}
//调用loadJs
loadJs("js/count.js");//这儿的参数是你的js的地址

2.动态加载js脚本

function loadJscode(code){
	  var script = document.createElement("script");
	  script.type = "text/javascript";
	   try{
		script.appendChild(document.createTextNode(code));
	   }catch(e){
		script.text = code;
	   }
	       document.body.appendChild(script);
}
    var text = "function test(){alert(‘test‘);}";
    loadJscode(text);

3.动态加载css文件

我们要把这块链接加入页面

<link rel="stylesheet" href="css/count.css" />

具体代码实现如下

function loadCss(url){
	  var css = document.createElement("link");
	  css.type = "text/css";
	  css.href = url;
	  document.body.appendChild(script);
}
//调用loadCss
loadJs("css/count.css");//这儿的参数是你的css的地址

4.动态加载css脚本

  

		function loadCsscode(cssCode){
				var style = document.createElement("style");
				style.type = "text/css";
				try{
					// firefox、safari、chrome和Opera
					style.appendChild(document.createTextNode(cssCode));//createTextNode创建文本节点
				}catch(e){
					//老版本的IE浏览器 ,需要使用style元素的stylesheet属性的cssText属性
					style.styleSheet.cssText = cssCode;
				}
				document.getElementsByTagName("head")[0].appendChild(style);
		}
		 var text = "font{color:#000;}";
		 loadCsscode(text);

  借鉴于袁客

  

时间: 2024-12-26 16:05:36

动态加载js,css(项目中需要的)的相关文章

动态加载js css 插件

简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两个前端模块加载器为require.js与sea.js,这两款模块加载器都不错.但是呢,有时候我仅仅需要的只是动态加载一个js,不需要把代码模块化,那我们只能自己手写一个加载函数. 简单的加载js /** * HTML动态加载js * @path {String} src地址必须带有后缀名.js *

jquery动态加载js/css文件方法

先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 HTML代码 代码如下 复制代码 <script type="

JS动态加载 js css

1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); script.type = "type/javascipt"; script.src = url; document.getElementsByTagName( "head" )[0].appendChild( script ); }; 2.动态加载CSS文件 function

动态加载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"&

为了提高性能,如何动态加载JS文件

超级表格是一款多人协作的在线表格,程序相当复杂,用到十几个JS文件.但是有些文件是在打开某些类型的表格时才需要加载. 例如,只有当打开甘特图表格时,才需要加载gantetu.js文件. 那么问题来了,为了减少js文件数量和请求,如何在需要时自动加载js文件呢? 办法如下. //动态加载js文件function mcss_importJS(js){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= doc

动态加载JS代码

到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <

Extjs学习----------动态加载js文件(减轻浏览器的压力)

动态加载js文件可以减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/details/38538277 具体实现步骤: (1)建立dynamic.jsp文件 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String

关于动态加载js

已知一个需要动态加载的js的文件路径数组,动态加载数组里面所有的js文件. 加载分两种情况: 1. 并行加载,不管js的执行顺序. 2. 串行加载,即一个一个加载,上一个加载完再加载下一个,直到最后. 动态加载js一般都是动态创建一个script, 解决第一种情况: function loadExternalFile(src,parentElement,tagName){ var elem = document.createElement(tagName); if(tagName==='link