You can use js to dynamically load the page and css or js implementation code. For more information, see. For more information, see.
The Code is as follows:
/*************************************** ********
* 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 This. loadjscssfile (jsfiles [I], "js ")
For (var I = 0; 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
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 ("myp", "content.htm", true)
// 2) ajaxpagefetcher. load ("myp2", "content.htm", true, ["external. js? 1.1.20 "])
// 3) ajaxpagefetcher. load ("myp2", "content.htm", true, ["external. js? 1.1.20 "], [" external.css? 1.1.20 "])
// 4) ajaxpagefetcher. load ("myp2", "content.htm", true, ["external. js? 1.1.20 "," external2.js? 1.1.20 "])
// 5) ajaxpagefetcher. load ("myp2", "content.htm", true, "", ["external.css? 1.1.20 "," external2.css? 1.1.20 "])