Script to load and display external content
1 Attachment(s)
Hi
Here is another script to request and load content from a server.
In addition to this the script scans for embeded css and script tags and acts accordingly.
In the exampel http://hgsweb.de/pframe this is done for Menu1
Code:
'use strict';
var HGSPFRAME = {
toggle: false,
xmlHttp: function() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
alert("Error creating the XMLHttpRequest object.");
return '';
}(),
async: false, // we will wait for the backend to complete
fillPframe: function(pfid, backend_script) {
////////////////
// pfid is the id of an html elemnt to fill with content
// delivered by the backend_script
// If this html element does yet not exist we create a div
// to hold the content.
////////////////
var dd = document.getElementById(pfid);
if (!dd) {
dd = document.createElement('DIV');
dd.id = pfid;
document.body.appendChild(dd);
}
dd.innerHTML = "...";
var xmlHttp = HGSPFRAME.xmlHttp;
xmlHttp.open("POST", "../pframe/pframeajax.php", HGSPFRAME.async);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var i, dd, result,ls,nl;
var jresp=eval('('+xmlHttp.responseText+')');
//////////////////
// result is encoded base64 on the server side
// this way we can send/receive any data over the wire
//////////////////
result = decode64(jresp.result);
dd = document.getElementById(jresp.pfid);
if (HGSPFRAME.toggle) {
if (dd.style.display !== "none" && dd.style.display !== "") {
dd.style.display = "none";
} else {
dd.innerHTML = result;
dd.style.display = "block";
}
} else {
dd.innerHTML = result;
dd.style.display = "block";
}
///////////////////
// here we look for CSS style sheet via link element
///////////////////
ls = dd.getElementsByTagName('LINK');
nl=ls.length;
for (i = 0; i < nl; i++) {
if (ls[i].type==='text/css' && ls[i].rel==='stylesheet') {
HGSPFRAME.includeCSS(ls[i].href);
}
}
///////////////////
// here we look for and execte/load any given JavaScript
///////////////////
ls = dd.getElementsByTagName('script');
nl=ls.length;
for (i = 0; i < nl; i++) {
if (ls[i].src==='undefined' || ls[i].src==='') {
eval(ls[i].innerHTML); // executes immediatly !!!
} else {
HGSPFRAME.includeJS(ls[i].src); // this is evaluated later
}
}
}
};
xmlHttp.send("pfid=" + pfid + "&script=" + encodeURIComponent(backend_script));
// Base64 encode / decode
// http://www.webtoolkit.info/
function decode64(input) {
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var output = "";
var enc1, enc2, enc3, enc4;
var i = 0, l = input.length;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < l) {
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));
output = output + String.fromCharCode((enc1 << 2) | (enc2 >> 4));
if (enc3 !== 64) {
output = output + String.fromCharCode(((enc2 & 15) << 4) | (enc3 >> 2));
}
if (enc4 !== 64) {
output = output + String.fromCharCode(((enc3 & 3) << 6) | enc4);
}
}
output=utf8_decode(output);
return output;
function utf8_decode(utftext) {
var string = "";
var i = 0;
var c,c3,c2;
c = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
},
includeJS: function(file) {
var l=document.getElementsByTagName('script');
var i;
for(i=0;i<l.length;i++){
if(l[i].src.indexOf(file)>0){
return;
}
}
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", file);
var heads = document.getElementsByTagName("head");
for(var i=0;i<heads.length;i++) {
heads[i].appendChild(script);
}
},
includeCSS: function(path) {
var l=document.getElementsByTagName('LINK');
var i;
for(i=0;i<l.length;i++){
if(l[i].href.indexOf(path)>0){
return;
}
}
var link = document.createElement("link");
link.setAttribute( "rel", "stylesheet");
link.setAttribute( "type", "text/css");
link.setAttribute( "href", path);
var heads = document.getElementsByTagName("head");
for(var i=0;i<heads.length;i++) {
heads[i].appendChild(link);
}
}
};
Regards
Heinz |
