【JavaScript(第二十二天)【动态加载js和css】】的更多相关文章

动态加载js和css

开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } /…

动态加载js和css的jquery plugin

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //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 are in th…

动态加载js、css 代码

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.…

JavaScript(第二十二天)【动态加载js和css】

学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   一．元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个DOM的方法:getBoundingClientRect().这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box = document.getElementById('box'); //获取元素 alert…

移动端性能优化动态加载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）文件

<script language="javascript">document.write("<script src='test.js'><\/script>");</script> 第二种.动态改变已有script的src属性<script src='' id="s1"></script><script language="javascript"&g…

动态加载JS 和 CSS

<script type="text/javascript"> $(function () { var filename = '/assets/css/main.css'; var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type&q…

动态加载js css 插件

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

javascript动态加载js文件主流浏览器兼容版

一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>动态加载JS文件</title> </head> <body> <button id="btn" onclick="loanScript('test.js…

JavaScript 之 动态加载JS代码或JS文件

2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if(typeof(callback) != "undefined"){     if (scri…

JavaScript动态加载js文件

/********************************************************************* * JavaScript动态加载js文件 * 说明: * 之前没有使用require来动态加载js文件,自己模仿实现了一个,参考文档2中 * 有jQuery的方法,以及等效原型. * * 2017-8-28 深圳 龙华樟坑村 曾剑锋 **************************************************************…

JavaScript 元素的插入顺序以及动态加载js

*****************记录下今天的心得***************** 1.元素的插入顺序 需求:异步从后台读取两个数据a和b,并动态加载到父容器x中,要求a必须在b的左边 实际情况:一开始是用x.append(...)的方法将a.b添加进去,由于是异步加载,查询速度快的请求自然会先显示在页面中的左边,于是最终列表中,a.b是忽左忽右的. 解决办法:使用 a.prependTo(x) 函数,应该好理解,就是始终把a插入到x的最前面. 2.动态加载js 需求:页面加载完毕后,设置页面…

动态加载js文件

由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = document.createElement ("script") script.type = "text/javascript"; script.src = url; document.getElementsByTagName("head")[0].appen…

动态加载JS函数

一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: 代码如下: <script type="text/javascript" src="example.js"></script> 但是直接使用script标签来加载js文件会有如下一些缺点: 1.严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小…

关于动态加载js

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

(一)JQuery动态加载js的三种方法

Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascript"> $(function() { $('#loadButton').click(function(){ $.getScript('new.js',function(){ newFun('"Checking new script"'); }); }); }); </…

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

js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=) 使用参数有两种可能: 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别. 即上面代码对于文件来说 等价于 但浏览器会认为他是 该文件的某个版本! 第二.客户端…

动态加载js,css

今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ ){ throw new Error('argument "path" is required !'); } ]; var link = document.createElement('link'); link.href = path; link.rel = '…

动态加载JS脚本的4种方法

实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax跨域问题,就是动态载入一个js脚本. 本文给出的四个方法,前三个是异步加载js.就是js加载和当前js脚本执行是两个线程,先加载完还是先执行当前脚本是不确定的.在加载这些脚本的同时,主页面的脚本继续运行. 第四个办法尝试用XMLHTTP取得要脚本的内容,再创建 Script 对象.经过测试,仍然不能…

动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加载的JS文件上的(调用了这JS里面的方法等等),此时就需要将这个方法作为JS加载后的回调函数进行执行 具体实例: JS 代码如下 function loadJs(loadUrl,callMyFun,argObj){ var loadScript=document.createElement('scr…

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

在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内容的正常解析,由此,便可以提高页面首次加载的速度. 那么,既然js是异步加载,我们又该如何判断它是否加载完成呢? 在IE或一些基于IE内核的浏览器中(如Maxthon),它是通过script节点的readystatechange方法来判断的,而其它的一些浏览器中,往往是通过load事件来决定的,如下…

动态加载 js

要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 <script src='' id="s1"></script> <s…

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

最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面配置的域名是正式服的域名,但是却检测到了我测试服的访问量,这就尴尬了,然后就想到了动态加载js 1.动态加载js文件 我们要把这块链接加入页面 <script src="js/count.js"></script> 具体代码实现如下 function loadJs(…

jquery getScript动态加载JS方法改进详解[转载]

转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法     $.getScript(url,callback)  这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个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 屌丝就是悲剧,五一还得宅家里写程序专研技术. 说起动态加载JS,搞web的肯定不陌生,著名的YUI库就有强大的模块化的动态加载JS机制.在代码量不断庞大的今天,动态加载JS作用还是非常明显的.事实上这门技术已经非常古老了,可是发现网络上非常多资料也相同非常古老.诶,没法,自立更生吧,人生总要不断积累的,更何况作为一个程序员呢. 关于动态JS大家比較关注的无非就两点,兼容性怎样?怎样控制是同步还是异步?如今针对常见的4种方案来分析.前3种是异步的,最后1种是同步的. 方法1:…

jquery动态加载js三种方法实例

这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\");就OK了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">…

JavaScript的DOM_动态加载脚本和样式

一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们想在需要检测浏览器的时候,再引入检测文件. <script type="text/javascript"> window.onload = function(){ alert(typeof BrowserDetect); } var flag = true; //设置 true…

JS动态加载JS

1.直接document.write <script language="javascript">     document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 <script src='' id="s1"></script> <script language…