最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨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);

  借鉴于袁客

  

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

  1. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  2. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  3. js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  4. 动态加载js,css

    今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...

  5. JS动态加载 js css

    1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...

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

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

  7. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  8. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  9. 动态加载JS过程中如何判断JS加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

随机推荐

  1. JVM菜鸟进阶高手之路三

    转载请注明原创出处,谢谢! 笨神大大分享: 小程序里面搜索:JVMPocket,这个小程序是笨神大大提供的,里面可以搜索相关JVM参数,用法. -XX:MaxTenuringThreshold,这个参 ...

  2. [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战

    我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj ...

  3. Query DSL(2)----Full text queries

    Match Query match查询接受文本/数值/日期 { "match" : { "message" : "this is a test&quo ...

  4. GitHub Desktop客户端打开文件乱码问题解决方案

    今天在使用GitHub Desktop客户端的时候,发添加本地仓库后文件内容显示为乱码. 1.现象  如下图所示: 2.原因分析 后来分析得知原来是由于编码不统一造成 的. 具体来说,我在window ...

  5. 随机算法 poj 2576 Tug of War

    Tug of War Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8187   Accepted: 2204 Descri ...

  6. 决策树模型组合之随机森林与GBDT

    版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...

  7. 30分钟快速学习Shell脚本编程

    什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_tut for ((i=0; i<10; i++)); do touch ...

  8. javascript的数值转换 number()详解

    ---恢复内容开始--- number() parseInt() parseFloat()这三个函都可以把数非数值转换为数值,我们看看他们的区别在哪里 一 Number() 转型函数Number()是 ...

  9. HDU2057 A + B Again

    Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...

  10. Echarts数据可视化legend图例,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...