Show page after specific Javascript is loaded - javascript

I dont want to reveal html page content if one specific javascript is not fully loaded. I want to show blank page when this javascript is loading. Javascript is located in .js file, so in html page it looks like this:
<script src = "file.js"></script>

Put the script tag into the head element of the html document, e.g.
<!doctype html>
<html>
<head>
<script src="file.js"></script>
</head>
<body>
</body>
</html>

This depends on whether file.js performs asynchronous operations.
If your file contains simple, synchronous code, a hackish solution would be to put document.body.style.display="none" at the start of the code and document.body.style.display="block" at the end. This will hide your document body until the script reaches the end.
A more robust solution would be to make sure all your code is in appropriate functions, and wrap the initial function with a callback that displays the body.
window.onload = runOnLoad( function() { document.body.style.display="block"; } );
function runOnLoad( callback ) {
document.body.style.display="none";
// rest of your code
callback();
}

Related

InnerHTML not working on external Java Script file

Javascript external file code:
document.getElementById("not-working").innerHTML=person.firstname+person.nickname+person.lastname+"is"+"awesome.";
I am trying to write the innerHTML in my HTML document by writing the above in my external Java Script file but it's not working.
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="home.js"></script>
<p id="demo">
Hello, this is Maqnoon.
<button onclick="myFunction()">Click me</button>
</p>
<p id="hello"></p>
<p id="not-working"></p>
</body>
</html>
Put your external JS importing <script> tag right after the ending </body> tag. Also, put your JS codes inside of the DOMContentLoaded listener like this,
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
function myFunction() {
// ...
}
});
Edit:
Explanation: The browser interprets the HTML from top to bottom, line by line. When you put the JS in the header section of the HTML, there is a possibility that your JS will finish running before the browser reaches to the elements in the later sections of your HTML. In that case, the JS will not be able to see the elements that are going to be loaded right after, maybe a few milliseconds or nanoseconds later. This is why it is advisable to put the <script> tags after your </body> element so that by the time the browser reaches to the JS, the HTML elements are already loaded.
To take it a step further, there is the 'DOMContentLoaded' event which is fired by the browser when it finishes loading the HTML. So, we put our JS code in it to make sure that the code runs after the entire HTML is loaded and available.

How to call a JavaScript function when the external JavaScript file is referenced at the end of the HTML body?

I know that when you want to invoke a JavaScript function inside a HTML body section you can do it by putting <script> someFunction(); </script> inside your body tag, here is an example, I have HTML like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"
src="/Script.js"></script>
</head>
<body>
<script>
showAlert();
</script>
</body>
</html>
And the javascript file like this:
function showAlert(){
alert("This is an alert!");
}
This works fine but if I put the JavaScript file reference at the end of the body like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script>
showAlert();
</script>
<script type="text/javascript"
src="/Script.js"></script>
</body>
</html>
the function showAlert() is no longer being invoked. Can you please answer these 2 questions:
Why is showAlert() not invoked in the second scenario?
How (if possible) to invoke a function from a JavaScript file when
it is referenced in the end of the body?
The reason why I'm asking is because I know that it is a good practice to refer your JavaScript files in the end of the body instead of the head, so that the page will be rendered first before loading all the JavaScript code.
1) The scripts are loaded linearly. Since the script has not yet been loaded, the function is undefined. (This is in contrast to function hoisting within a script.)
2) Simply wait till the page loads.
window.onload = function(){
showAlert();
}
(Simply doing window.onload = showAlert won't work because of reason #1. Here you delay evaluation until such time that the function will exist.)
Assuming you want to run showAlert() immediately when the page has loaded, try adding an onload() event handler to call showAlert rather than just calling it as the script loads. This can be done a few ways:
<body onload="showAlert();">
or define the window onload event programatically where your current function all is made in the html
window.onload = new function() {showAlert();}
or (and I think this is the preferred way because it won't cancel out other event handlers bound to the onload event)
window.addEventListener("load", showAlert);
By default, scripts run sequentially. Your code doesn't work because showAlert() runs before loading Script.js, so at that point the function showAlert is not defined yet.
To make it work, you must delay the showAlert call.
The load event has already been mentioned in other answers, but it will wait for all resources (like images) to load. So listening to the DOMContentLoad event is usually better, the function will be called sooner.
<script>
document.addEventListener('DOMContentLoaded', function() {
showAlert();
});
</script>
<script src="data:text/javascript,
function showAlert() {
console.log('Hello!')
}
"></script>
The reason for your script isn't working is the way how a webpage is parsed..From top to bottom..Here is some link (would help to know why script added at bottom).
1) in your First case the browser loaded script when it parsed the page and when you called it in body it was available so it got invoked.
2) in Second scenario (My be typo) You have placed the call to function before loading the script that contain your function. so during page parsing browser wont find it and continue to next line where script containing function is loaded which has no effect for now as it already parsed the call.
If you still want to follow the second scenario you have to trigger the function call (after ensuring all resources being loaded ie Your script).
so you can use window.load=<your function call> or in case of jQuery place it inside
$(document).ready(function(){
//call here
});
Javascript processes in the order given. You are trying to call showAlert before showAlert have been defined. Change to:
<body>
<script type="text/javascript"
src="/Script.js">
</script>
<script>
showAlert();
</script>
</body>
and all should work as intended.

Why use window.onload

I have tried finding an answer to this on my own, but only found instructions on how to use onload events. I seem to be missing the point.
I've been taught that if I want something to happen when the page loads, I should use window.onload like this:
<script>
window.onload = dosomething();
function dosomething()
{
window.alert('hello');
}
</script>
But now that I am thinking on my own I wonder what the point of doing that is. Because this also produces the same result:
<script>
dosomething();
function dosomething()
{
window.alert('hello');
}
</script>
Anything I put at the top inside <script> is going to execute anyway... so what's the point of window.onload?
If you're directly running your code with dosomething();, you're delaying your browser's rendering for the time it takes your JavaScript code to run.
You can try to insert your code to the <head> of your html document:
<!DOCTYPE html>
<html>
<head>
<script>
dosomething();
function dosomething()
{
window.alert('hello');
}
</script>
</head>
<body>
Does not render before the alert is dismissed!
</body>
</html>
You'll see that the page stays blank until you dismiss the alert. So every second the browser takes to run your JavaScript code is a second that your users have to wait for the site to be rendered.
Now if you change the code to be run on body's onload, the page gets rendered before the alert is shown:
<!doctype html>
<html>
<head>
<script>
function dosomething()
{
window.alert('hello');
}
</script>
</head>
<body onload="dosomething()">
This page gets rendered before the alert!
</body>
</html>
Consider these two blocks of code:
<head>
<script>
alert(document.getElementById('foo').value);
</script>
</head>
<body>
<input id="foo" value="hello">
</body>
<head>
<script>
window.onload = function() {
alert(document.getElementById('foo').value);
}
</script>
</head>
<body>
<input id="foo" value="hello">
</body>
In the first example, we'll get an error because the element you are referencing isn't found when the script runs - and so you are trying to get value of null.
In the second example, document.getElementById() will find the element with the id foo, because window.onload will get fired only when the complete DOM has been loaded and so the element is available.
window.onload will fire once the DOM has finished loading. In your example, the DOM is not required. However, the following code will fail if the DOM has not yet loaded:
function doSomething() {
alert(document.getElementById('test').innerText);
}
// Throws: TypeError: Cannot read property 'innerText' of null
Assuming your page contains an element with id test, it will alert its text.
waiting for the onload event assures you that all of your scripts and resources are loaded
Assume you are using jquery in your page and you invoked a function that uses it directly without onload , you can't guarantee that the jquery file has been loaded, which will lead to errors and possibly ruining your whole logic
The onload event is handy to make sure the page is fully loaded before you run a script. For your example above it doesn't make sense, but if your page is still loading an item on the bottom and you try to call it then nothing will run.
I recommend using jQuery and using the ready function. This way you will ensure your page is completely loaded.
$( document ).ready(function() {
// This will only run after the whole page is loaded.
});
If you don't want to load query, just put your javascript at the bottom of the page. It's best practice, and ensures the DOM is loaded in full.
For more info on the jquery ready function go here: https://api.jquery.com/ready/

Adding JavaScript code with jQuery.html()

<!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
var x="<script>alert('hello world');</script>";
$("#div_one").html(x);
});
</script>
</head>
<body>
<div id="div_one">
</div>
</body>
</html>
Why does this not work? I'd expect the JS code between the script tags to be interpreted and see an alert message ...
What I want to do:
I have written a set of functions that add and delete items from an array depending on the user input (JavaScript). Then, I have a function that draws() a ul-list of the items held in the array. Behind each item, I want to provide a remove link, which calls a JavaScript function that removes the item from the array and then calls drawList() to redraw the list.
If there weren't that security policy, I'd simply do it as in the code shown above.
That is some weird browser bug I believe. For some reason you can't have </script> inside the script block.
Change to
var x="<scr"+"ipt>alert('hello world');</scr"+"ipt>";
Example on jsFiddle
That is not a bug. The problem is here:
<script>
$(document).ready(function() {
var x="<script>alert('hello world');</script>";
$("#div_one").html(x);
});
</script>
The browser thinks the first <script> tag is associated with the </script> inside your code.
As you can see, the code is shown in the DOM instead of executing.
To further prove it, see this example:
http://jsfiddle.net/DerekL/Ah8Qz/
var x = $("<script>").html("alert('hello world');");
$("#div_one").append(x);
If you avoid the </script> closing tag, then there will be no problem because the HTML parser will ignore any open <script> tag inside <script>.
So to sum up,
Browsers does not have security in place to stop scripts being injected into your page.
This is no where near a browser bug.

document.getElementByID external or inline?

I have been trying to use the document.getElementByID to pull information from an HTML file from an external JS file and it does not seem to be working. Does the document.getElementByID only work if it is inline with the HTML file or can it work properly on an external JS file? The JS file is called upon within the HTML document properly because other functions are working.
First off, make sure you're using document.getElementById("xxx"), not document.getElementByID("xxx") (note the difference in capitalization at the end). Your question refers to document.getElementByID("xxx") so that could be the problem right here.
Second, you must make sure that the function is executed AFTER the relevant DOM items have been parsed by the browser. If you are putting the document.getElementById in an external JS file that is loaded in the <head> section and is executed immediately after it loads, then the DOM will not yet be ready.
You have several options:
1) Place the external JS file <script> tags at the end of the body, right before the </body> tag. This will not only load/display your page faster, but will guarentee that the DOM is parsed before anything in that JS file can run.
<body>
Your HTML here
<script type="text/javascript" src="myscript.js"></script>
</body>
2) Since you have jQuery, put your immediately executed code inside of a $(document).ready(fn) block so that jQuery will hold back the execution until the DOM is ready. If you do it this way, then you can put your code anywhere (including in the <head> section if you want).
$(document).ready(function() {
// put your page initialization code here
});
3) Put your code anywhere you want, but don't have any of it execute immediately. Instead, put all your initialization code in an intialization function (let's call it myPageInit() that you call from:
$(document).ready(myPageInit);
4) Put your code anywhere you want, but don't have any of it execute immediately. Instead, put all your initialization code in an intialization function (let's call it myPageInit() that you call from a script right before the </body> tag with this:
<script type="text/javascript">myPageInit()</script>
Does the document.getElementByID only work if it is inline with the HTML file
No.
can it work properly on an external JS file?
Yes.
You're probably calling document.getElementById() before the DOM is ready.
My suggestion is to do this:
window.onload = function () {
// document.getElementById() code here
}
Then your document.getElementById() would not execute until every element on the page has fully loaded.
If you put the script in the <head> then the body hasn't loaded yet and so the elements aren't there.
Either defer the script by using jQuery's functions, or put the script at the end of the body.
window.onload = function() {
document.getElementById("demo").innerHTML = "My First JavaScript";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js in ts</title>
<script src="app.js"></script>
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
</body>
</html>

Categories

Resources