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插件
Nov 24 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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可逆加密函数(分享)
2013/06/06 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js数组操作学习总结
2013/11/04 Javascript
JS画线(实例代码)
2013/11/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
物流仓储计划书
2014/01/10 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
教师考察材料范文
2014/06/03 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
盗窃案辩护词
2015/05/21 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js