用正则表达式 动态创建/增加css style script 兼容IE firefox


Posted in Javascript onMarch 10, 2009

str 是表示通过ajax返回的XMLRequest
/*动态加载css style*/
function loadStyle(str)
{
var regExp_src=/<style.*src\s*=\s*["'][^"']*["'].*>[^<>]*<\/style\s*>/gi;
var matchArray_src=str.match(regExp_src);
alert(matchArray_src[0]);
if(matchArray_src){
for(var i=0;i<matchArray_src.length;i++)
{alert("sss");
var str_temp = matchArray_src[i].toString();
var regExp_src_temp = /<style.*src\s*=\s*["']([^"']*)["'].*>[^<>]*<\/style\s*>/gi;
str_temp.match(regExp_src_temp);/*这里重复使用匹配是为了,$1这个子表达式指向当前的值,否则会永远是最后一个$1值*/
var head = document.getElementsByTagName('head')[0];
/*IE*/
if(document.all){
alert("IE");
if(document.getElementsByTagName('style')[0])
{
var sty=document.getElementsByTagName('style')[0].innerHTML;
alert(sty);
var sty = document.getElementsByTagName('style')[0].innerHTML;
//不知道怎么样取得IE当前的style标签,用getElementsByTagName不行,只能采此下策,创建一个新的,并加上以前的样式
var styleSheet = document.createStyleSheet();
styleSheet.cssText=sty+RegExp.$1;
}
else
{
var styleSheet = document.createStyleSheet();
styleSheet.cssText="body{background:red;}\<br\>"
alert("finished");
}
}
/*FIREFOX*/
else{
var style;
if(document.getElementsByTagName('style')[0])
{
var sty=document.getElementsByTagName('style')[0].innerHTML;
alert(sty);
document.getElementsByTagName('style')[0].innerHTML=sty+RegExp.$1;
}
else
style=document.createElement('style');
style.type = 'text/css';
style.innerHTML=RegExp.$1;
head.appendChild(style);
alert(RegExp.$1);
}
}
}
}
/*动态加载具有src属性的script*/
function loadScript_src(str){
var regExp_src=/<script.*src\s*=\s*["'][^"']*["'].*>[^<>]*<\/script\s*>/gi;
var matchArray_src=str.match(regExp_src);
if(matchArray_src)
{
for(var i=0;i<matchArray_src.length;i++)
{
var str_temp = matchArray_src[i].toString();
var regExp_src_temp = /<script.*src\s*=\s*["']([^"']*)["'].*>[^<>]*<\/script\s*>/gi;
str_temp.match(regExp_src_temp);
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = RegExp.$1;
script.defer="true";
head.appendChild(script);
alert(RegExp.$1);
}
}
}
/*动态加载innerHTML 中的Script*/
function loadScript(str){
var regExp_function=/<script[^>]*>([\s\S]*?)<\/script[\s]*>/gi;
var matchArray_function=str.match(regExp_function);
if(matchArray_function){
for(var i=0;i<matchArray_function.length;i++){
var str_temp=matchArray_function[i].toString();//其实用正则表达式的向前向后查找的话是很方便的,但javascript却不支持,所以只能采取此下策
var regExp_function_temp=/<script[^>]*>([\s\S]*?)<\/script[\s]*>/gi;
var matchArray_temp=str_temp.match(regExp_function_temp);
eval(RegExp.$1);
}
}
}

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
htm调用JS代码
Mar 15 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
JavaScript 基本概念
Jan 20 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
Iframe thickbox2.0使用的方法
Mar 05 #Javascript
js 颜色选择器(兼容firefox)
Mar 05 #Javascript
小型js框架veryide.librar源代码
Mar 05 #Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 #Javascript
javascript radio 联动效果
Mar 04 #Javascript
js 页面执行时间计算代码
Mar 04 #Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 #Javascript
You might like
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
javascript 闭包详解
2015/07/02 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python如何读写csv数据
2018/03/21 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
小学新教师培训方案
2014/02/03 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
学校隐患排查制度
2015/08/05 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
《静夜思》教学反思
2016/02/17 职场文书
高一作文之暖冬
2019/11/09 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
springboot如何初始化执行sql语句
2021/06/22 Java/Android