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 相关文章推荐
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python任务调度实例分析
2015/05/19 Python
python发送邮件脚本
2018/05/22 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python中reader的next用法
2018/07/24 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
自我鉴定怎么写
2014/01/12 职场文书
优乐美广告词
2014/03/14 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
党员民主生活会材料
2014/12/15 职场文书
党支部培养考察意见
2015/06/02 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书