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 文件 ...
随机推荐
- crontab 定时任务没有响应 检测步骤
设置规则 # 每分钟执行一次 */1 * * * * /scripts/script.sh # 每小时执行一次 0 */1 * * * /scripts/script.sh # 每天 02:00 执行 ...
- css 重点知识 和 bug 解决方法
1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...
- js 从两道面试题加深理解闭包与箭头函数中的this
壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...
- Apollo 分布式配置中心（补充）
1. Namespace 1.1. 什么是Namespace Namespace是配置项的集合,类似于一个配置文件的概念. Apollo在创建项目的时候,都会默认创建一个“application ...
- Prometheus学习系列（六）之Prometheus 查询说明
前言 本文来自Prometheus官网手册和 Prometheus简介 Prothetheus查询 Prometheus提供一个函数式的表达式语言PromQL (Prometheus Query La ...
- WPF之实现控件内容拖动
以下分别记录label.listbox.treeview三个控件的拖动示例: 1.对被拖动控件,实现拖动事件,主要是通过各种鼠标事件,实现DragDrop.DoDragDrop方法. 2.对于需要拖动 ...
- python3 print() 函数带颜色输出 示例
1.1 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表示就 ...
- LeetCode刷题191218
好多天没有更新了,今天有空,刷一道. 算法第5题 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: ...
- Spring Boot与ActiveMQ整合
Spring Boot与ActiveMQ整合 1使用内嵌服务 (1)在pom.xml中引入ActiveMQ起步依赖 <dependency> <groupId>org.spri ...
- linux安装数据时报错Could not execute auto check for display colors using command /usr/bin/xdpyinfo.
在redhat6.5上安装Oracle时,最后使用oracle用户执行runInstaller 报错如下,无法连接到安装有xmanager的windows服务器,也就无法图形化安装oracle ora ...