JavaScript---动态加载script和style样式
一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档，XML文档都有很特殊的象征:"标签"也叫"节点"。
一个基本的网页格式
<!DOCTYPE />
<head></head>
<body><body />
这些是最基本的形态，但是其实它省略了最外面的一个标签<document>
<document>
<!DOCTYPE />
<head></head>
<body><body/>
</document>
这其实才是它的本来面目（默认把document标签给省略了）。document.body 或者docment.head,无论你的什么操作只要是有关于这个<document>标签的你跟可以利用document获得，因为它是根。网页文档中任何存在在<document>标签里面都是可以获得的，所有的节点其实都是已经被分类好，但它们的nodeType和nodeName不一样而已。
代码写法一：
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (typeof (callback) != "undefined") {
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function () {
callback();
};
}
};
script.src = url;
document.body.appendChild(script);
}
写法二：
function loadScript(){
var script=document.createElement("script");
script.type="text/javascript";
script.src=null
try{
script.appendChild(document.createTextNode("//code")); //javascript内容是利用createTextNode创建的（不过IE不认这个）
}catch(ex){
script.text="//code"; //IE认为SCRIPT节点是个特殊的节点所有有个特殊的text属性
}
document.body.appendChild(script); /*兼容IE*/
}
动态加载样式：
// 动态记载样式
function loadStyle(){
var style=document.createElement("style");
style.type="text/css"; //参考网页上的style样式，他怎么写你怎么写
style.href="style.css";
try{
style .appendChild(document.createTextNode("//style code"));
}catch(ex){
style.styleSheet.styleText="//style code"; /*兼容IE*/ //IE也认为style节点是个特殊的节点所有有个特殊的styleSheet.styleText属性 - -
} var head=document.getElementByTagName("head")[0];
head.appchild(link);
}
JavaScript---动态加载script和style样式的更多相关文章
- JS学习之动态加载script和style样式
前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...
- JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- JavaScript动态加载资源【js|css】示例代码
在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...
- JavaScript动态加载js文件
/********************************************************************* * JavaScript动态加载js文件 * 说明: * ...
- 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- 动态加载script文件
动态加载script文件: http://www.cnblogs.com/skykang/archive/2011/07/21/2112685.html
- JavaScript动态加载资源
//动态加载样式 function dynamicLoadingCss(path){ if(!path || path.length === 0){ return false; } var head ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
随机推荐
- vue 中 px转vw的用法
下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根 ...
- Ghost手动备份、还原系统详细图文教程
1.Ghost工具下载 https://pan.baidu.com/s/10cpRhhjJAHZb5PPZo6ghvw 2.备份.还原详细步骤请参考 https://jingyan.baidu.com ...
- sqlserver update join 多关联更新
由于程序bug,导致之前很多数据入库后信息不全,好在有基础信息表,可以通过基础信息表更新缺失字段信息 1.通过 inner join语法实现多关联更新 update a set a.name = b. ...
- Docker设置镜像加速
一.为什么要设置镜像加速 由于docker的镜像源地址再国外,例如官方地址:https://hub.docker.com/search?q=hyperledger&type=image:因此下 ...
- 【STM32-V5】STM32F407开发板开源, 丰富软件资源, 强劲硬件配置, 配套500实例, 10套手册带视频教程2019-12-12
淘宝购买地址:购买地址链接 从2013年5月份发布至今,开发板硬件更新过6个版本,软件资料更新过85次.当前标准库最新版本V8.8,HAL库最新版本V1.1 安富莱微信公共平台,欢迎大家关注(打造高质 ...
- Linux命令学习-cat命令
Linux中,cat命令的全称是concatenate,主要用于显示文件内容. 查看centos系统版本 cat /etc/centos-release 查看文件 gogs.log 的内容 cat g ...
- python批量插入数据到es和读取es数据
一.插入数据 1.首先准备类似如下数据 {"_type": "type1", "_id": 1, "_index": & ...
- 三个月前的评测拖延三个月仍旧是拳王No.1吗？YES!
距前作展开隐形的翅膀,WPR003N补完篇仿佛已经隔了几个光年,最近替换了2019发现android sdk需要手冻放入一个tools2文件夹来延续Eclipse style的m$ distribut ...
- feign响应Image流对象
feign面向方法签名的http调用,越来越受欢迎,类型于rpc的thrift,只需要关注方法签名和返回值即可,当然feign响应流对象时,需要我们做一下特殊处理,否则会出现异常.也有一些文章通过重写 ...
- Python @classmethod和@staticmethod装饰器使用介绍
@classmethod和@staticmethod装饰器使用介绍 by:授客 QQ:1033553122 简介 静态方法:类中用 @staticmethod装饰的不带 self 参数的方法.类的静态 ...