griimnak
You're a slave to the money then you die
- Jul 20, 2013
- 955
- 794
Sup, i have a pure javascript loader to load pages in without refreshing the page:
So, at the moment this works fine, it does exactly what i want.
But, i notice that sometimes the css will delay (white bg), it's barely noticeable but i'd like to fix that.
I had to add function addScripts() to eval <Scripts> under the body because innerHTML doesn't allow script execution.
I think that's fine, pretty sure the only thing making the css delay a few miliseconds is document.getElementsByTagName('html')[0].innerHTML = request.responseText;
What else could i do to write the content while allowing my scripts to execute?
I also tried just overwriting the <body id="toReplace"> instead of the whole <html> but that resulted in <head> being spammed (because eval script i think) every time you would visit a page.
Fixed!, found this article to help me:
Thread may now be closed
PHP:
/* JS Loader */
window.onload = function() {
var load = function(e) {
// prevent browser to load link
event.preventDefault();
// exit if target is undefined
if(typeof(e.target) == 'undefined' ) {return;}
// exit if clicked element is not a link
if (e.target.tagName !== 'A') {return;}
// get href from clicked element
var href = e.target.getAttribute("href");
// retrieve container and source
var href_parts = href.split('=');
var container = href_parts[0].substr(1);
var source = href_parts[1];
// instantiate a new request
var request = new XMLHttpRequest();
// bind a function to handle request status
request.onreadystatechange = function() {
if(request.readyState < 4) {
// handle preload
return;
}
if(request.status !== 200) {
// handle error
return;
}
if(request.readyState === 4) {
// handle successful request
successCallback();
}
};
// open the request to the specified source
request.open('GET', source, true);
// execute the request
request.send('');
/*
I think successCallback needs improvement
*/
successCallback = function() {
// on success place response content in the specified container
// Adds scripts to page since innerHTML disallows script execution.
function addScripts() {
var arr = document.getElementById(container).getElementsByTagName('script');
if (arr) {
for (var n = 0; n < arr.length; n++) {
eval(arr[n].innerHTML);
}
}
}
document.getElementsByTagName('html')[0].innerHTML = request.responseText;
addScripts();
// scroll back to top, minor annoyance
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
// change url in the address bar and save it in the history
history.pushState('','',source);
}
};
// listen
document.addEventListener('click', load, false);
};So, at the moment this works fine, it does exactly what i want.
But, i notice that sometimes the css will delay (white bg), it's barely noticeable but i'd like to fix that.
I had to add function addScripts() to eval <Scripts> under the body because innerHTML doesn't allow script execution.
I think that's fine, pretty sure the only thing making the css delay a few miliseconds is document.getElementsByTagName('html')[0].innerHTML = request.responseText;
What else could i do to write the content while allowing my scripts to execute?
I also tried just overwriting the <body id="toReplace"> instead of the whole <html> but that resulted in <head> being spammed (because eval script i think) every time you would visit a page.
Fixed!, found this article to help me:
You must be registered for see links
PHP:
/* JS Loader */
window.onload = function() {
var load = function(e) {
// prevent browser to load link
e.preventDefault();
// exit if target is undefined
if(typeof(e.target) == 'undefined' ) {return;}
// exit if clicked element is not a link
if (e.target.tagName !== 'A') {return;}
// get href from clicked element
var href = e.target.getAttribute("href");
// retrieve container and source
var href_parts = href.split('=');
var container = href_parts[0].substr(1);
var source = href_parts[1];
// instantiate a new request
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
// bind a function to handle request status
request.onreadystatechange = function() {
if(request.readyState < 4) {
// handle preload
return;
}
if(request.status !== 200) {
// handle error
return;
}
if(request.readyState === 4) {
// handle successful request
successCallback();
}
};
// open the request to the specified source
request.open('GET', source, true);
// execute the request
request.send('');
successCallback = function() {
// on success place response content in the specified container
/*.
function addScripts() {
var arr = document.getElementById(container).getElementsByTagName('script');
if (arr) {
for (var n = 0; n < arr.length; n++) {
eval(arr[n].innerHTML);
}
}
}
document.getElementsByTagName('html')[0].innerHTML = request.responseText;
addScripts(); */
document.getElementById(container).innerHTML = request.responseText;
var allScripts = document.getElementById(container).getElementsByTagName('script');
for (var n = 0; n < allScripts .length; n++) {
eval(allScripts [n].innerHTML)
}
// scroll back to top, minor annoyance
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
// change url in the address bar and save it in the history
history.pushState('','',source);
}
};
// listen
document.addEventListener('click', load, false);
};Thread may now be closed
