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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
Javascript变量作用域详解
Dec 06 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php简单统计中文个数的方法
2016/09/30 PHP
javascript 模拟点击广告
2010/01/02 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JS delegate与live浅析
2013/12/21 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
react 生命周期实例分析
2020/05/18 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python解析json代码实例解析
2019/11/25 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
婚前协议书
2014/04/15 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
教师节寄语2015
2015/03/23 职场文书
校车司机安全责任书
2015/05/11 职场文书
2019财务毕业实习报告
2019/06/27 职场文书