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 相关文章推荐
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
基于vue中的scoped坑点解说
Sep 04 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
使用python加密自己的密码
2015/08/04 Python
详解Python字符串对象的实现
2015/12/24 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
大学生交通专业求职信
2014/09/01 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
九九重阳节致辞
2015/07/31 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript