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 文件 ...
随机推荐
- 解决“fatal: 'origin' does not appear to be a git repository...”
当使用Git进行代码push提交时,出现报错信息“fatal: 'origin' does not appear to be a git repository...”, $ git push -u o ...
- laravel 框架源码分析
laravel框架的文档中的例子很多时候不是很明显,所以想要真正的使用好这个框架,我们可以尝试去阅读它源码中的注释(不得不说laravel源码的注释还是很详细的). 我们先来看一下laravel 的文 ...
- Spring Boot Security 保护你的程序
Spring Boot Security 本示例要内容 基于角色的权限访问控制 加密.解密 基于Spring Boot Security 权限管理框架保护应用程序 String Security介绍 ...
- win10下配置python环境变量（Python配置环境变量）
从官网下载Windows下的python版本,一路按照默认进行安装. 安装之后配置环境变量的步骤如下: 1,点“我的电脑”,右键选“属性”. 2,选择“高级系统设置”--->选“环境变量”--- ...
- spring单元测试下模拟rabbitmq
gradle添加引用 compile 'org.springframework.boot:spring-boot-starter-amqp' testCompile 'com.github.fridu ...
- Attach Files to Objects 将文件附加到对象
In this lesson, you will learn how to attach file collections to business objects. For this purpose, ...
- Cookie插件的使用
jQuery-cookie插件的使用 什么是插件? 基于jQuery的语法,按照一定规范书写,具有特定功能的脚本文件,称为插件. 插件除了js文件之外,有的还包含css文件,图片和字体等资源文件. 在 ...
- 着色器语言GLSL入门
着色器语言 GLSL (opengl-shader-language)入门大全 -- 转载自: https://github.com/wshxbqq/GLSL-Card
- 团队项目之Scrum6
小组:BLACK PANDA 时间:2019.11.26 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 编辑功能优化 实现主页内容展示 今天计划完成的工作 2 内容展示 根 ...
- VS2017无法打开Razor视图文件提示:引发类型"System.Exception"异常
背景介绍 由于电脑装了R#(吃内存大户),导致VS2017打开项目慢以及卡顿,因此在扩展和更新这个功能里面将没用的插件关闭了,导致.NET CORE的Razor视图文件打不开(真心是一脸懵逼,关个插件 ...