Running script after DOM is finished - javascript

I'm dynamically creating menu items to be placed on the menu bar, based on the headers of external files, imported with an XMLHttpRequest(). As I navigate through the different pages, this menu bar is dynamically updated.
This works fine.
I load each document into an individual div element, in a sort of stack of cards, and hide all but the setVisible() page.
window.onload = function(){
loadContent("personalinfo");
loadContent("academicalinfo");
loadContent("employmentinfo");
setVisible("academicalinfo");
/*setMenues("academicalinfo");*/
}
The last action of setVisible() is to call setMenues(), which is responsible for reading all of the headers of said main window. This also works fine-ish.
function loadMenues(file) {
var rightmenu = document.getElementById("right-menu");
while(rightmenu.firstChild){
rightmenu.removeChild(rightmenu.firstChild);
}
[].forEach.call(document.getElementById(file).children,
function(custompaddingchild) {
/* searching for h1 and adding menu items happens here */
}
);
The problem arises when the DOM elements are not loaded yet, as when the page loads. Since there are no ElementsById(file) in the document element until the page is completely rendered, it fails to add the menu items onload.
I have tried adding an EventListener on the "load" event of the window and on the document, I have tried executing the function on the end of the body of the main page, and on the on onload= argument of <body> (which runs even before the subpages are captured, leaving me with a blank page instead of the actual content), but as it seems, none of them seems to happen after the page is completely loaded.
Adding a 2 second delay before running the functions is not an effective solution. Besides, adding a delay to the onload function will not affect the result, and will only increase loading time by two seconds.
Clicking any of the menues which update the menues work as intended. The only problem is onload.
<div class="menu-item" onclick="setVisible('personalinfo');"><span>Personal information</span></div>
How can I make sure the page delays the setVisible() function until after the page is rendered? All the sources I've found claim the "load" event is triggered after the page is rendered, but it doesn't seem to be triggered in my case. The DOMContentLoaded event isn't triggered either, but I suspect I don't want this one. The click event, or a scroll event on the window, in contrast, do trigger correctly.
Mozilla, Window: load event
Javascript.info, Page: DOMContentLoaded, load, beforeunload, unload
Edit: As per request, here is loadContent():
function loadContent(file) {
var request = new XMLHttpRequest();
request.open("GET", file+".html?_=" + new Date().getTime());
request.onreadystatechange=function(){
var loadedcontent = request.responseText;
document.getElementById(file).innerHTML = loadedcontent;
}
request.send();
}
Edit 2:
Full code is available at https://github.com/mazunki/portfolioweb-stackoverflowquestion

You need to use promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Try this
function loadContent(file) {
return new Promise(function (resolve, reject) {
var request = new XMLHttpRequest();
request.open("GET", file+".html?_=" + new Date().getTime());
request.onreadystatechange=function(){
var loadedcontent = request.responseText;
document.getElementById(file).innerHTML = loadedcontent;
resolve();
}
request.send();
});
}
window.onload = function(){
// when you finish all the content loading
Promise.all([
loadContent("personalinfo"),
loadContent("academicalinfo"),
loadContent("employmentinfo")
]).then(function() {
// Load menu
setVisible("academicalinfo");
/*setMenues("academicalinfo");*/
})
}

Sorry, but you tried to use the "library" https://github.com/ded/domready ? I think that is the simpliest solutuion for you.
Then you code would be:
function loadMenues(file) {
domready(function () {
var rightmenu = document.getElementById("right-menu");
while(rightmenu.firstChild){
rightmenu.removeChild(rightmenu.firstChild);
}
[].forEach.call(document.getElementById(file).children,
function(custompaddingchild) {/* searching for h1 and adding menu items happens here */ }
);
})
}

While this only stands as a fallback solution, and is not reliable over slow network connections, I solved it by placing the following inside the menuhandling.js file, called with <script src="menuhandling.js" type="text/javascript" defer></script>:
setTimeout(function(){
setVisible("personalinfo")
/*setMenues("personalinfo")*/
},500) // half a second
loadContent() is called for all files in stackhandling.js, with no delay, and not document.onload nor window.onload.

Related

how to know when an iframe has finished loading the DOM, but not yet all images?

My web page has an iframe, and I change its src when the user clicks on a showNewPage button. I need to know when the browser has finished loading the DOM of the iframe, but without waiting for all the images to be downloaded.
var myIFrame = document.getElementById("myIframe")
var count = 0;
funcion showNewPage() {
myIFrame.src = "http://example.com/page_" + count;
count++;
}
This code calls doSomething() when the iframe has finished loading the DOM and all images:
myIFrame.addEventListener("load", function(event) { doSomething(); });
How to ask myIFrame to call doSomething() when the iframe has finished loading the DOM, but not yet all the images?
ps: There is an event DOMContentLoaded instead of load which achieves this; but this event is not available for an iframe. It's available only for a document or a window. Doing as follows does not work neither, because myIFrame.contentWindow returns null at the very beginning:
myIFrame.contentWindow.addEventListener("DOMContentLoaded", function(event) { doSomething(); });
ps: this other question does not answer my question, as it relies on onload event, which waits until all images are downloaded: How to detect when an iframe has already been loaded
As you found out, trying to get its .contentWindow before the iframe has been initialized will return null.
One way around this is to
initialize your frame with an empty document (about:blank),
get a reference to your iframe's contentWindow, this will always be the same object, however events we attach on it will get removed at every new navigation...
add an unload event listener (since it's the closest to the navigation)
wait just a frame so our contentWindow start the navigation
add your DOMContentLoaded and our unload event listeners so we can reiterate at next navigation
frame.onload = e => {
const win = frame.contentWindow;
frame.onload = null;
win.addEventListener( 'unload', attachEvents );
YOUR_CALLBACK(); // make it fire even at beginning?
function attachEvents() {
setTimeout( () => {
win.addEventListener( 'DOMContentLoaded', YOUR_CALLBACK );
win.addEventListener( 'unload', attachEvents ); // do it again at next navigation
}, 0 );
};
};
frame.src = "about:blank";
As a fiddle since StackSnippets over-protected iframes don't allow us to access inner frames' content...

Raising alert after the page loads completely

I want to load stackoverflow page and then raise the alert, strictly one after the other, without using frameworks like jQuery etc.
I have gone through the answers here and visited this too.
I ran the following in browser console. The page loads but the alert is not raised. I am using chrome in windows 8.1.
Try #1:
window.location.href = 'https://stackoverflow.com/';
window.onload = function () { alert("It's loaded!") }
Try #2:
window.location.href = 'https://stackoverflow.com/';
if(document.readyState === "complete") {
//Already loaded!
window.onload = function () { alert("It's loaded!") }
}
else {
//Add onload or DOMContentLoaded event listeners here: for example,
window.addEventListener("onload", function () {/* your code here */}, false);
//or
//document.addEventListener("DOMContentLoaded", function () {/* code */}, false);
}
Try #3:
window.location.href = 'https://stackoverflow.com/';
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
alert("It's loaded!");
}
}, 1000);
Try #4:
Tried setTimeout() too but doesn't work either.
I have tried above examples with window.location.replace() also.
How do I make this work?
P.S: I am novice with javascript. The above codes are not mine but I am just trying to work them out. I don't claim to have understood them completely either.
As Barmar pointed out this is not possible. The new page load will remove all JavaScript from the old page. Some alternatives are:
You can open the new page or in a new tab using the window.open api and attach an event handler.
You can load the page inside a frame (if it doesn't have any restrictions preventing that) and add a load event to the frame.
You can load the page using XMLHttpRequest (or a library of your choice) and insert the result into a <div> though not all of it will probably work.
You don't say what you want to do once the page has loaded. In most cases (generally unless you own the second page) it will not be possible to access any information on the second page.

How to get full loaded HTML source from web site in a Chrome Extension

I need the same source i can find in the Elements window of DevTool console in my extension. I tried using the content script
var text = document.documentElement.innerHTML;
injected after catched the "complete" status from chrome.tabs.onUpdated.addListener, but i recived only the html code without the content dynamically created.
In particular i want my extension to find all "div" added dynamically.
Any help will be appreciated!
The complete event fires once the initial page content has been loaded. It has no relation to dynamically generated content, otherwise it would have to wait indefinitely, since more content may always be added later.
If you are interested in a specific element, you can use setTimeout to periodically poll for the element. Like so:
function getElement() {
return new Promise(function(res, rej) {
var interval = setInterval(function() {
var elm = document.getElementById('the-element-you-want');
if(elm){
clearInterval(interval);
res(elm);
}
}, 10);
});
}
Another option would be to use a MutationObserver to detect when the desired element(s) have been created.

Perform animation on a page after page has loaded

I am doing maintenance work for a website. The logo on the home page is supposed to bounce in from left after page has loaded but the animation begins even when the page is still loading.
The code is
$(document).ready(function(){
$('#logo-large').addClass('animated bounceInLeft');
});
The site is using animate.css library
The ready method do not wait for resources to load.
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
Reference: https://api.jquery.com/ready/
Use window.load method:
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
$(window).on('load', function() {
$('#logo-large').addClass('animated bounceInLeft');
});
Reference: https://api.jquery.com/load-event/
The problem here is that you say "page loaded" but you haven't defined what that means. The animation is, indeed, playing after the DOM has loaded. That's what the $(document).ready method insures. However, any images or asynchronous calls can still trigger after the DOM is ready. So... the REAL question is, do you want to wait til after the images have loaded AND do you have any asynchronous calls that need to be accounted for.
I just wrote this so I'm not 100% sure if it doesn't have any bugs, but this should work for both cases.
jQuery.prototype.pageComplete = function(promises, callback){
if(!callback){
callback = promises;
promises = [];
}
var images = jQuery.Deferred();
var DOMReady = jQuery.Deferred();
var count = this.length;
promises.push(images);
promises.push(DOMReady);
jQuery(document).ready(function(){
DOMReady.resolve();
});
function counter(){
if(--count == 0) images.resolve();
}
this.each(function(image){
var img = new Image();
img.onload = counter;
img.src = image.src;
});
jQuery.when.apply(jQuery, promises).then(callback);
};
You use it like so:
// for just images
$('img').pageComplete(function(){
// code to transition image here
});
// for images and ajax
$('img').pageComplete([
ajax1, // these are all promises created by jQuery.ajax
ajax2,
ajax3
],
function(){
// code to transition image here
});
Try this one, solution should work without jquery
window.onload = function() {
document.getElementById('logo-large').classList.add('animated', 'bounceInLeft');
};
Use The Window Load Function
This will wait until the whole page has loaded before running the animation
jQuery(window).load(function() {
$('#logo-large').addClass('animated bounceInLeft');
});)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

windows onload not firing from external script

Okay i know this has been asked a lot but it seems that none of the solutions actually work for me. Here's the situation. I have a webpage that i need to add to an existing site, this site uses a master page which i can not touch. This limits me to using javascripts window.onload because i do not have access to the body tag.
On my page i have linked my external .js file in the head beneath every other external file. Here is an example of what my .js file looks like.
var myobj = null;
(5 or so functions that work properly. Mainly just toggles that show and hide divs. none touch the onload)
function load(){
myobj = document.getElementById("my_element");
alert("test");
}
window.onload = load;
Tried this and the load function never fires as i never get the alert. I've tried commenting out the first line in the load function and only haven't the alert and still nothing. Looking around i also found another way to do it that i tried without success. Everything else is the same except i removed the window.load and added this.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(load);
addLoadEvent(function () {
/* more code to run on page load */
alert("hello2");
});
In this function, neither of the alerts fire. I have also tried placing an alert outside of a function, that one does work.
The browsers i am using are IE 8.0.7600.16385 and Chrome 21.0.1180.60
Let me know if you need more information.
Oh and as a side note, i cannot use jquery or any other javascript library as we are trying to keep this as light as possible. This page also must work in IE8, that is the businesses only supported browser at the moment. It would be nice if it worked in Chrome as well.
EDIT
In case i'm going about this completely the wrong way, what i am trying to do is keep track of the last element i have. I essentially have a page with 2 columns, left side is a menu and right is content. The content is all placed in div's with only one category showing at a time. The way it is supposed to work is when clicking on the menu category it hides the previous content and shows the new content.
I have set my content class to display: none; and have the start_content ID set to display: block;. What the Javascript is supposed to do is initialize my global with the start_content object. When clicking in the menu it calls a function that does an obj.style.display = 'none' and then sets the new obj to display = 'block'. It then takes the new obj and places it in my global variable to be changed on the next menu click.
here's an example without any of the onload functions
var prevContent = document.getElementById("start_content");
function toggle(id) {
prevContent.style.display = "none";
var content = document.getElementById(id);
content.style.display = "block";
prevContent = content;
}
The problem with this is that prevContent is unidentified when it enters the toggle function. I had assumed this was because i am linking this .js file in the head and so the page hasn't loaded my start_content yet which is why i had changed it to declaring the global as a null and then setting up a window.onload to set the appropriate value after it is created.
Adding "Defer" to the script tag in the head ended up doing the trick.

Categories

Resources