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学习之prop和attr的区别示例介绍
Nov 15 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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图像处理类代码分享
2012/01/19 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Vuex简单入门
2017/04/19 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
20招让你的Python飞起来!
2016/09/27 Python
Python面向对象特殊成员
2017/04/24 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
实验心得体会
2014/09/05 职场文书
python实现简单聊天功能
2021/07/07 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
讲解MySQL增删改操作
2022/05/06 MySQL