`
mutongwu
  • 浏览: 449907 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

动态加载JS/CSS文件--改进版

阅读更多
function loadScript(url, callback,targetWin) {
     if(!targetWin)
    	 targetWin = self;
     var script = targetWin.document.createElement("script")  
     script.type = "text/javascript";  
     if (script.readyState) { // IE  
         script.onreadystatechange = function() {  
             if (script.readyState == "loaded"  
                     || script.readyState == "complete") {  
                 script.onreadystatechange = null;  
                 if(typeof callback == "function")
                	 targetWin.callback();  
             }  
         };  
     } else { // Others  
         script.onload = function() {  
        	 if(typeof callback == "function")
        		 targetWin.callback();    
         };  
     }  
     script.src = url;  
     targetWin.document.getElementsByTagName("head")[0].appendChild(script);  
 } 

//示例
function init(){
	var flexWin = top.frames['flex'];
	var url = "/web/test.js";
	if(window.addEventListener){
		flexWin.addEventListener('load',function(){
			loadScript(url,null,flexWin);
		},false);
	}else if(window.attachEvent){
		window.attachEvent('onload',function(){
			loadScript(url,null,flexWin);
		});
	}else{
		flexWin.onload =function(){
			loadScript('test.js',null,flexWin);
		}
	}
}
/*
* 注意:frame中window对象的获取,需要采用上述形式。
 如果使用 document.getElementsByTagName 或 getElementById 方法,拿到的是一个frame对象,通过该frame对象,我们可以通过 contentWindow来获取对应的window对象。但是,chrome不支持 contentWindow属性。
var frames = top.document.getElementsByTagName("frame");
alert(frames['a1'].contentWindow);//undefined in chrome
*/


//动态加载js、css内容,直接写入页面:

动态添加js/CSS的内容在页面上:
function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex){  
        script.text = code;  // IE
    }
    document.body.appendChild(script);
}    


function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    } catch (ex){
        style.styleSheet.cssText = css; //IE
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

Usage:
    loadScriptString('function sayHi(){alert("hi");}');

    loadStyleString('body{background-color:red}');
分享到:
评论

相关推荐

    JQueryMobile js/css/1.2版本/1.4版本

    它包含JavaScript(JS)和 Cascading Style Sheets(CSS)组件,为开发者提供了丰富的交互元素和页面布局选项。 标题中的“JQueryMobile js/css/1.2版本/1.4版本”指的是该压缩包包含了JQuery Mobile框架的两个主要...

    element-ui 2.15.14版本

    Element UI 是一个基于 Vue.js 的开源前端组件库,版本号 2.15.14 表示这是它的一个特定更新版本。这个版本可能包含了错误修复、性能优化、新功能添加或者对现有组件的改进。Element UI 提供了一系列美观、易用且...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    而`jquery-1.7.1.min.js`是经过压缩和优化的版本,体积更小,加载速度更快,适用于生产环境。在实际项目中,开发阶段通常使用非min版本,部署时则切换到min版本。 2. **jQuery 1.7 版本的关键更新**: - **$.ajax...

    Combres .net js/css压缩工具

    Combres .NET是一款高效且强大的JavaScript(js)和CSS(层叠样式表)压缩工具,专为.NET开发者设计。这个工具的主要目标是提高网站的性能,通过合并、压缩和缓存Web应用程序中的静态资源,从而减少HTTP请求的数量和...

    postcss-pxtoremvw:加载程序,它将px转换为rem和vw

    postcss-px-to-vw A plugin for PostCSS that converts pixel units to vw unit. postcss-pxconverter 目前存在的问题 rem 布局受到 root font-size 影响,如果 Android 开启了字号放大模式,会导致整个布局崩盘。 ...

    green-audio-player:音频播放器JavaScript库

    由于许多人的要求,我决定创建一个存储库,其中包含Green Audio Player的改进版本,并在单个页面上支持多个音频播放器。 安装 Github 下载存储库ZIP。 CDN 或者,您可以从CDN加载它: < link rel =" ...

    jquery-1.9.1.min.js_javascript_jquery_

    **jQuery 概述** ...jQuery 1.9.1.min.js 是一个压缩版的库文件,适用于生产环境,以减少页面加载时间和提高性能。无论你是初学者还是经验丰富的开发者,jQuery 都能帮助你更高效地实现网页交互和动态效果。

    dist.rar, Video.js发布dist Video.js 7.6.0、video.min.js、video-js.min.css,下载可直接使用

    压缩包中的"video.min.js"是Video.js的核心JavaScript库,经过压缩处理,用于减小文件大小,加快页面加载速度。这个文件包含了播放、暂停、控制条、字幕、播放列表等功能的实现,使得开发者无需从头构建复杂的视频...

    jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css

    在实际项目中,`jquery-ui-1.8.2.custom.min.js`和`jquery-ui-1.8.4.custom.css`通常一起使用,以确保JavaScript组件的外观和行为与CSS样式协调一致。然而,需要注意的是,这两个版本相对较旧,可能不包含后来版本中...

    bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js

    在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中,我们可以看到两个关键文件:`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩...

    org/openjfx/javafx-web

    3. **JavaScript交互**:JavaFX允许应用程序与加载的Web内容进行JavaScript交互,提供了JavaScript对象到Java对象的绑定,以及执行JavaScript代码的能力,这样可以利用JavaScript库增强JavaFX应用的功能。...

    mobiscroll-2.13.2.full 包含css和js

    - `content` 文件夹很可能包含了所有必要的CSS和JS文件,可能有`mobiscroll.css`和`mobiscroll.js`主文件,以及其他按主题或功能划分的文件。 - 可能还有示例文件或文档,帮助开发者快速了解如何在项目中集成和...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    压缩后的`jquery-1.11.1.min.js`通过删除注释、合并变量、压缩代码等方式,显著减少了文件大小,提高了页面加载速度。然而,由于代码被高度压缩,不适合用于调试,因为其可读性较差。 8. **使用场景** jQuery广泛...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **AJAX请求**:`.ajax()`, `.get()`, `.post()`等方法使得异步数据交换变得简单,同时,`.load()`可以实现局部页面的动态加载。 - **动画效果**:`.fadeIn()`, `.slideUp()`, `.animate()`等动画函数为网页增加...

    css3-switch-light-button.zip

    在Web开发中,CSS3(层叠样式表第三版)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它扩展了CSS2.1的功能,引入了许多新的特性和改进,如动画、过渡、变换等。 描述中的信息简洁,仅...

    ArcGIS api for Javascript3.21版本加载天地图

    要实现ArcGIS API for JavaScript 3.21版本加载天地图,首先需要了解ArcGIS的图层加载机制。地图由多个图层组成,每个图层可以是不同的数据源,如TiledMapServiceLayer(瓦片地图服务)或DynamicMapServiceLayer...

    jsTree 很好用的动态加载数

    虽然较新版本可能包含更多的改进和修复,但这个版本仍能提供基本的树结构和动态加载功能。在实际项目中,通常建议使用最新稳定版本以获取最佳性能和兼容性。 总的来说,jsTree 是一个功能强大、易于使用的 ...

    纯css tab切换效果(改进版)

    这个“纯css tab切换效果(改进版)”不仅展示了如何使用CSS来创建动态的Tab切换组件,还体现了对用户体验的关注,如过渡效果和良好的交互设计。通过这样的实践,开发者可以提升网页的可访问性和可用性,同时保持...

    react-ReactCSSLoaders一个纯CSSReact加载中的组件集合

    2. **纯CSS实现**:库中的加载指示器组件完全基于CSS编写,这意味着所有的动画和样式都在CSS中定义,无需依赖JavaScript来驱动动画效果。这种实现方式的优点是性能优化,因为CSS动画通常比JavaScript动画更轻量且...

Global site tag (gtag.js) - Google Analytics