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实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
js实现批量删除功能
Aug 27 Javascript
详解VUE中的插值( Interpolation)语法
Oct 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代码审计比较有意思的例子
2014/05/07 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
react基本安装与测试示例
2020/04/27 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
对Python中range()函数和list的比较
2018/04/19 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
财会专业毕业生自荐信
2014/07/09 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
楚门的世界观后感
2015/06/03 职场文书
离职告别感言
2015/08/04 职场文书
上班旷工检讨书
2015/08/15 职场文书
公司周年庆寄语
2019/06/21 职场文书
python实现层次聚类的方法
2021/11/01 Python
Python装饰器详细介绍
2022/03/25 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技