I'm using a javascript in my html page.. I have been recording the time taken using the navigation API .. When I try to findout the total load time (navigationStart - loadEventEnd) I find that the loadEventEnd is 0 . But also found that the loadEventStart value is recorded .. I print these values on console inside window.onload = function() {} . . From the above stats I assume that my function is called after the load event has fired and before it has completed .. However using onunload function gives me the result , the result cannot be viewed as it is printed in the console and unload event is triggered when moving away from the page .. Please help me find a solution .
Most likely you're getting a value of 0 because you're printing the information before the page has completed loading, try the following snippet:
window.onload = function(){
setTimeout(function(){
var t = performance.timing;
console.log(t.loadEventEnd - t.responseEnd);
}, 0);
}
That will make sure the numbers are printed after the page is actually ready. Got that snippet from here. Other information from that page you might find interesting:
Data from the API really comes to life when events are used in combination:
Network latency (): responseEnd-fetchStart.
The time taken for page load once the page is received from the server: loadEventEnd-responseEnd.
The whole process of navigation and page load: loadEventEnd-navigationStart.
Use the onload attribute in the tag as follows:-
<body onload="methodName();">
Try the following example for better understanding:-
<html>
<head>
<script type="text/javascript">
function test(){
alert("hello");
}
</script>
</head>
<body onload="test();">
<h5>Simple javascript test for page load</h5>
</body>
</html>
Try the following. i hope it will also work...
Use the window.onload object as follows:-
window.onload=function(){
//set of javascript statments...
}
or if you have any functions then use the window.onload as follows:-
window.onload=function_name
Have a look at the following example for better understanding of window.location
<html>
<head>
<script type="text/javascript">
window.onload = test;
function test(){
alert("hello");
}
</script>
</head>
<body>
<h5>Simple javascript test for page load</h5>
</body>
</html>
Related
I'm writing an in-browser HTML editor where users write HTML code that is sent (on every keystroke) to an iframe for preview purposes. This is the code I have now:
onCodeChange(html) {
iframe.contentDocument.open();
iframe.contentDocument.write(html);
iframe.contentDocument.close();
}
The problem appears when users try to add <script> tags with a const in them:
<!doctype html>
<html>
<body>
<script>
const a = 42;
</script>
</body>
</html>
When a user types in ... const a = 4 ... everything is fine (initial declaration of a as 4), but when they finish typing ... const a = 42 ... (redeclaration of a as 42), then an error is thrown:
Uncaught SyntaxError: Identifier 'a' has already been declared
I think that this happens because the JavaScript context remains the same even if the document is rewritten.
I have tried using srcdoc:
onCodeChange(html) {
iframe.srcdoc = html;
}
It works, but causes the iframe to flicker (I imagine that it unloads and loads the iframe) and I don't want users to have seizures...
I'm currently thinking about having two iframes (one on top of the other), using srcdoc, and swapping their z-index on load. It's very weird, but could fix the flickering.
Is there anything else I can do?
Just wrap your script with an IIFE every time you want to change the code.
<!doctype html>
<html>
<body>
<script>
(function(){const a = 42;})();
</script>
</body>
</html>
I am including an external JS file, which has some code that I need to run after a particular thing happens (after contact form is submitted).
The external file has a function but also calls the function. This isn't much of a pain if it was OK to run that function on page load, but I need to run its function after a form is submitted. My form is submitted via AJAX, so I need to run the external file's function after the form has submitted, only.
How can I do this?
Here's an illustration to help...
MY SITE'S FOOTER:
<script type="text/javascript">
var a_variable = 12345;
</script>
<script src="//domain.com/external.js" type="text/javascript"></script>
</body>
</html>
CONTENTS OF EXTERNAL.JS:
function doThis(){
alert(window.a_variable);
}
doThis();
But I only want to run doThis() at a time that I want, not on page load.
Can I stop doThis(); from executing until I explicitly tell it to?
NOTE: I have already tried including external.js by creating a script tag (in javascript) and loading it that way, but the function in external.js needs to write to my users' browser, to which the users' browser says Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.. After that, I looked into the solutions in this answer, but it did not solve the problem. So, I am looking for a way to stop doThis() from executing.
Can you edit the external.js file? If so you should just remove the doThis() line and add a listener to call the function on window load like so:
function doThis(){
alert(window.a_variable);
}
window.onload = doThis;
If you cannot edit the JavaScript file you are a bit stuck. You could try to rewrite it and just include it locally, following the above pattern (since you can pull the file I assume you have access to the source and could easily download the file and edit it). I would suggest this course of action.
If you really need it to be pulled from that specific source and cannot edit the file, you can look into something like require.js. This will allow you to load a JavaScript file from within other JavaScript code, so you can wait for the document to load before including it. So your html could be:
<html>
<body>
<script type="text/javascript">
var a_variable = 12345;
window.onload = function() {
require(["//domain.com/external.js"], function() {
console.log("loaded!");
});
}
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>
</body>
</html>
I have the following example below. I am curious why the console log writes the line 'document is ready' twice (both in FF as well as Chrome). How can I make sure it only runs once?
Additional question: since I am also using window.onload that already has an event attached, is it possible to add a window event without removing previously assigned ones?
<!doctype html>
<html>
<head>
<script>
window.onload=function(){console.log('window is ready');}
document.onreadystatechange = function(){console.log('document is ready');}
</script>
</head>
<body>
Hello
</body>
</html>
It runs multiple times because it have multiple states
https://developer.mozilla.org/en/docs/Web/API/Document/readyState
loading, interactive, complete
If you want to catch only one of them, just filter it using code similar to the one you see by the link
I am trying to get html of newly open window after activating a link that uses javascript by zombie.js.
Here is the html code
<html>
<head>
<script type="text/javascript">
function newin(id)
{
var url="page.php?id="+id;
window.open(url,id,"toolbar=no,location=top,directories=no,status=no,scrollbars=yes,hscroll=no,resizable=yes,copyhistory=no,width=1025,height=1250");
}
</script>
</head>
<body>
<div>
123<br/>
234<br/>
345<br/>
</div>
</body>
The Script I am using is:
var Browser = require("zombie");
var browser = new Browser();
browser.visit("http://localhost:8000/testpage.html", function () {
browser.wait(function(){
var selector = "a[href*='newin']";
var elements = browser.queryAll(selector);
for (var e=0;e<elements.length;e++){
browser.clickLink(elements[e],function(){
browser.wait(function(){
console.log(browser.html());
});
});
}
});
});
I am not able to get HTML of any window.Any ideas what is wrong in this code ? Or is this possible with phantomjs??
Finally I come to know that if a link contains JavaScript directly in the href or action, Zombie seems to understand that as opening a new page like a normal hyperlink would. While the JavaScript is still executed correctly, the DOM is lost as a result of Zombie trying to load the invalid target as a new page.
A problematic link would be e.g.
test
There’s no support for javascript:links, it is still an open issue:
https://github.com/assaf/zombie/issues/700
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I've been using document.GetElementById() successfully but from some time on I can't make it work again.
look at the following Code:
<html>
<head>
<title>no title</title>
<script type="text/javascript">
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
</script>
</head>
<body>
<div id="ThisWillBeNull"></div>
</body>
</html>
I am getting document.getElementById("parsedOutput") is null all the time now.
It doesn't matter if I use Firefox or Chrome, or which extensions I have enabled, or what headers I use for the HTML, it's always null and I can't find what could be wrong.
You can use the script tag like this:
<script defer>
// your JavaScript code goes here
</script>
The JavaScript will apply to all elements after everything is loaded.
Try this:
<script type="text/javascript">
window.onload = function() {
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
}
</script>
Without window.onload your script is never invoked. Javascript is an event based language so without an explicit event like onload, onclick, onmouseover, the scripts are not run.
<script type="text/javascript">
window.onload = function(){
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
}
</script>
Onload event:
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
https://developer.mozilla.org/en/DOM/window.onload
Timing.
The document isn't ready, when you're getting the element.
You have to wait until the document is ready, before retrieving the element.
The browser is going to execute that script as soon as it finds it. At that point, the rest of the document hasn't loaded yet — there isn't any element with that id yet. If you run that code after that part of the document is loaded, it will work fine.
<script type="text/javascript">
window.onload += function() {
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
}
</script>
Use += to assign more eventHandlers to onload event of document.