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 文件 ...
随机推荐
- Ubuntu Server 上在安装Nginx时执行./confgiure后提示：C compiler cc is not found
场景 Ubuntu Server 16.04 LTS上怎样安装下载安装Nginx并启动: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...
- 简单看看es6解构赋值
哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...
- 使用VS2005编译安装openssl1.1.1c
1.首先获取openssl源码包 openssl-1.1.1c.tar.gz: 2.安装 ActivePerl: 2.解压源码包,打开vs2005命令行工具,通过命令行进入openssl源码包根目录: ...
- <计算机系统结构中的8个伟大思想>
摘自<计算机组成与设计>戴维帕森 ——面向摩尔定律的设计 ——使用抽象简化设计 ——加速大概率事件 ——通过并行提高性能 ——通过流水线提高性能 ——存储器层次 ——通过冗余提高可靠性
- badboy脚本录制工具的安装
一.获取软件包 百度搜索badboy,或者直接访问官网:https://badboy.en.softonic.com/ 点击Download,下载安装包 或者从我的网盘提取: 链接:https://p ...
- ruby中的多线程和函数的关键字传参
1.实现ruby中的多线程 # def test1 # n = 1 # if n > 10 # puts "test1结束" # else # while true # sl ...
- Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构
Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...
- Go交叉编译(Go语言Mac/Linux/Windows下交叉编译)
Go交叉编译(Go语言Mac/Linux/Windows下交叉编译) 2019/11/21 Chenxin 在很多时候,由于开发的方便,会有这样的场景出现,使用Mac开发或使用Windows开发,需要 ...
- navicat连接不上Linux服务器上的mysql的解决办法
一开始,心情是沉痛的,截图如下: 转载请注明出处:https://www.cnblogs.com/NaughtyCat/p/how-to-connect-to-mysql-on-linux-by-na ...
- SVN 创建发行版/分支版的步骤
最近看了很多 Git 与 SVN 的比较,很多都说 SVN 做分支很慢,不知道是从何说起.有可能大家都不清楚,SVN 做分支的正确步骤,特此介绍一下. SVN 服务器后台使用 Berkeley DB ...