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 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 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连接Oracle数据库
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php长字符串定义方法
2012/07/12 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python绘图实现显示中文
2019/12/04 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
大学生入党思想汇报
2014/01/01 职场文书
高二政治教学反思
2014/02/01 职场文书
生产厂长岗位职责
2014/02/21 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
马智宇结婚主持词
2014/04/01 职场文书
学校工作推荐信范文
2014/07/11 职场文书
导游词之潮音寺
2019/09/26 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android