今天研究了下js动态加载js文件和css文件的方法。 网上发现一个动态加载的方法。摘抄下来，方便自己以后使用 [code lang="html"] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Javascript includes - ready state and onload</title></pre> <script type="text/javascript"> var css; function include_css(css_file) { var html_doc = document.getElementsByTagName('head')[0]; css = document.createElement('link'); css.setAttribute('rel', 'stylesheet'); css.setAttribute('type', 'text/css'); css.setAttribute('href', css_file); html_doc.appendChild(css); // alert state change css.onreadystatechange = function () { if (css.readyState == 'complete') { alert('CSS onreadystatechange fired'); } } css.onload = function () { alert('CSS onload fired'); } return false; } var js; function include_js(file) { var html_doc = document.getElementsByTagName('head')[0]; js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', file); html_doc.appendChild(js); js.onreadystatechange = function () { if (js.readyState == 'complete') { alert('JS onreadystate fired'); } } js.onload = function () { alert('JS onload fired'); } return false; } </script> </head> <body> <h1>javascript includes testing - testing readyState and onload</h1> This is a test file, part of the second follow up to the "<strong>javascript includes</strong>" article. <br /> To see the article, <a href="http://www.phpied.com/javascript-include">click here</a>. To see the follow-up article, <a href="http://www.phpied.com/javascript-include-ready">click here</a>. To see the second follow-up article, <a href="http://www.phpied.com/javascript-include-ready-onload">click here</a>. <p> </p> <ul> <li style="cursor: pointer" οnclick="include_css('1.css')">Click to load 1.css</li> <li style="cursor: pointer" οnclick="include_js('jsalert.js')">Click to load jsready.js</li> </ul> </body> </html> <pre> [/code]  

转载于:https://www.cnblogs.com/woaic/p/3942922.html

js动态加载css文件和js文件的方法相关推荐

  1. 第二十四节：动态加载JS和动态加载CSS

    1.动态加载JS 一般需要用到js,需要将js放到<script></<script>中,一般script放到页面底部:或者在顶部引入外部js. <!DOCTYPE ...

  2. php动态加载js,动态加载script文件的两种方法_javascript技巧

    动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...

  3. JS动态加载脚本及对动态脚本内方法的调用

    JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...

  4. 转：JS动态加载JS

    JS动态加载JS 1.直接document.write <script language="javascript"> document.write("< ...

  5. python 爬虫+selenium 全自动化下载JS动态加载漫画

    ** python 爬虫+selenium 全自动化下载JS动态加载漫画 最近刚学的python,代码可能并不规范,希望大家见谅! 爬取之前,我们首先需要做一些准备工作,因为很多网站都有反爬检索,为了 ...

  6. 【Jquery】Jquery动态加载css文件

    前言 很多时候我们需要在页面中引用外部的css文件,下面将介绍一下如何通过Jquery动态加载css文件 方式一(Jquery) var cssFileUrl='../css/home.css'; i ...

  7. javascript动态加载css、javascript脚本 方法

    1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){a ...

  8. html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别

    html通过分辨率动态加载css,做响应式页面 响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可 自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理 法1 ...

  9. 静态链接库（LIB）和动态链接库（DLL），DLL的静态加载和动态加载，两种LIB文件。

    静态链接库(LIB)和动态链接库(DLL),DLL的静态加载和动态加载,两种LIB文件. 一. 静态链接库(LIB,也简称"静态库")与动态链接库(DLL,也简称"动态库 ...

最新文章

  1. java 读取html模板文件_Java根据html模板创建 html文件
  2. python 计算算术平方根
  3. 光谱分析软件_利用Tracker软件分析太阳光谱中辐射强度与波长的关系
  4. 学习Spring Boot：（十九）Shiro 中使用缓存
  5. SJTU OJ 3046 足球 题解
  6. sapi cli php mac,make: *** [sapi/cli/php] Error 1 解决办法
  7. 使用STL中的list容器实现单链表的操作
  8. C Linux 文件加锁 lock fcntl
  9. C++中vector的用法
  10. ArcGIS10.4下载及安装
  11. 名词用作动词举例_古语名词使动用法解析
  12. Mysql 分隔符详解（delimiter）
  13. 2018年算法工程师秋招经验贴（微软、华为、网易游戏、阿里offer）
  14. Tomcat日志记录post请求参数
  15. 数据结构中的有序和无序
  16. 全球仅10%的开发者从不加班；淘宝回应用户账号被禁用 980 年;苹果宣布首次以官方形式参与天猫618折扣活动...
  17. linux下eeprom测试函数,Linux Kernel eisa_eeprom_read函数绕过安全检查漏洞
  18. 形态学 - 边界提取
  19. 2019 MySQL8 24小时快速入门（2）
  20. openlayers6【二十二】vue addLayer实现点击地图添加图标要素信息，编辑点位信息

热门文章

  1. 在React / React Native中使用构造函数与getInitialState有什么区别？
  2. 抽象函数和虚函数有什么区别？
  3. PostgreSQL“ DESCRIBE TABLE”
  4. win10安全中心关闭不了怎么办
  5. win11安装软件没反应怎么办 Windows11安装软件没反应的解决方法
  6. ViewPager使用android
  7. spring Bean的作用域（注解 单例 多例）
  8. java链式存储_Java实现链式存储的二叉树
  9. 正则表达式查找字符串_如何简单理解正则表达式？只需1分钟就可以看到她优美的舞姿...
  10. linq的字段自增长属性设置_云途晨报9月9日前，这5类ebay物品属性必须完成更新;Wish体积重计算方式即将更新...