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-世界上误解最深的语言分析
Aug 12 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
微信小程序实现左滑删除效果
Nov 18 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
js实现随机点名功能
2020/12/23 Javascript
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python Flask实现restful api service
2017/12/04 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Django ModelForm操作及验证方式
2020/03/30 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
化学教师自荐信范文
2013/12/28 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
MySQL深分页问题解决思路
2022/12/24 MySQL