Javascript load Page,load css,load js实现代码


Posted in Javascript onMarch 31, 2010
/*********************************************** 
* Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com) 
***********************************************/ 
var ajaxpagefetcher={ 
loadingmessage: "Loading Page, please wait...", 
exfilesadded: "", connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){ 
var page_request = false 
var bustcacheparameter="" 
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc 
page_request = new XMLHttpRequest() 
else if (window.ActiveXObject){ // if IE6 or below 
try { 
page_request = new ActiveXObject("Msxml2.XMLHTTP") 
} 
catch (e){ 
try{ 
page_request = new ActiveXObject("Microsoft.XMLHTTP") 
} 
catch (e){} 
} 
} 
else 
return false 
var ajaxfriendlyurl=pageurl.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") 
page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)} 
if (bustcache) //if bust caching of external page 
bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() 
document.getElementById(containerid).innerHTML=ajaxpagefetcher.loadingmessage //Display "fetching page message" 
page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true) 
page_request.send(null) 
}, 
loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){ 
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ 
document.getElementById(containerid).innerHTML=page_request.responseText 
for (var i=0; i<jsfiles.length; i++) 
this.loadjscssfile(jsfiles[i], "js") 
for (var i=0; i<cssfiles.length; i++) 
this.loadjscssfile(cssfiles[i], "css") 
this.pageloadaction(pageurl) //invoke custom "onpageload" event 
} 
}, 
createjscssfile:function(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 
fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
var fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet") 
fileref.setAttribute("type", "text/css") 
fileref.setAttribute("href", filename) 
} 
return fileref 
}, 
loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files 
if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded 
var newelement=this.createjscssfile(filename, filetype) 
document.getElementsByTagName("head")[0].appendChild(newelement) 
this.exfilesadded+="["+filename+"]" //remember this file as being added 
} 
else{ //if file has been loaded already (replace/ refresh it) 
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using 
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for 
var allsuspects=document.getElementsByTagName(targetelement) 
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove 
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){ 
var newelement=this.createjscssfile(filename, filetype) 
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]) 
} 
} 
} 
}, 

pageloadaction:function(pageurl){ 
this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded 
}, 
onpageload:function(pageurl){ 
//do nothing by default 
}, 
load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){ 
var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles 
var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles 
this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles) 
} 
} //End object 
//Sample usage: 
//1) ajaxpagefetcher.load("mydiv", "content.htm", true) 
//2) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"]) 
//3) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"], ["external.css"]) 
//4) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js", "external2.js"]) 
//5) ajaxpagefetcher.load("mydiv2", "content.htm", true, "", ["external.css", "external2.css"])
Javascript 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 #Javascript
jquery+json实现的搜索加分页效果
Mar 31 #Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 #Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 #Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 #Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 #Javascript
jquery CSS选择器笔记
Mar 29 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
用js的for循环获取radio选中的值
2013/10/21 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue+Element-ui实现分页效果
2020/11/15 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
快速入手Python字符编码
2016/08/03 Python
Django与JS交互的示例代码
2017/08/23 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python列表list保留顺序去重的实例
2018/12/14 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python列表的逆序遍历实现
2020/04/20 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
技术合作协议书范本
2014/04/18 职场文书
开工仪式策划方案
2014/05/23 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript