This question already has answers here:
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
(7 answers)
Closed 8 years ago.
I have listen a lot that we should always load the java script at the end of the page why we should do that. If i write the java script at starting of the page how it will make the difference?
If you write javascript at the start of the page, than you'll not be able to access the DOM elements, directly.
However when you use it at bottom, all the elements will have been rendered and you can use them.
In the first case, you would need something like this:
window.onload = function(){
document.getElementById('id');
}
But in the second case, you need just:
document.getElementById('id');
Also, if you have scripts at the start of the page, it will block the UI from rendering.
If you're using JS to manipulate the DOM, you'll want the page to be loaded before the script is run - usually this means placing the script after the page content.
However, if the Javascript is in response to say an onClick event, you shouldn't need to put it at the base of the page.
Related
This question already has answers here:
How to add meta tag in JavaScript
(5 answers)
Closed 3 years ago.
I want to add meta tag conditionally in an HTML page, i am not sure if it is ok to do so or not using jQeruy ready even. The example is given bellow.
var myHost = window.location.host;
if(myHost.startsWith("techstag")) {
$("head").append('<meta name="robots" content="noindex,nofollow">');
}
In short, it may or may not work.
It would work in the sense you'll see the meta tag in page when you inspect it.
But, if you are intending to do this for SEO purposes
For the most part, it won't work, as most web crawlers do not execute javascript while scanning the web pages.
It will work for crawlers that do execute JS (e.g. Google's)
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
i'm trying to load javascript asynchronous in the head section. After page loading in developer console i have error that "jQuery is not defined". After one or two refreshes scripts load and work perfectly. Without "async" inside script tag also works. Why this happens and is there any way to fix this. Thanks in advance
As Dellirium said, JQuery needs to be placed before the javascript code that requires it. You could try placing the JQuery in the <head> and the script you're running at the end of the body tag <body>.
You could add a function to be executed when jQuery is loaded.
<script src="jquery.js&callback=start"</script>
In which &callback=start executes the start() function in your actual javascript file, which you can use to wrap your code around.
function start() {
/* your code */
}
The reason jQuery couldn't be found the first times is because your browser caches the jQuery when it is fully loaded. It has to load the entire file the first time you actually visit or force-reload the page.
When you use async on a script tag, the script can execute in any order, at any point during the page load, which is why your scripts work only sometimes. You trade away knowing the order of execution for slightly faster page loads. This usually requires that the scripts you load do not depend on each other or an elaborate loading scheme - usually using one callback function that runs without async and invokes your code when dependencies report they're available.
You should consider if async is really the right option for your setup.
This question already has answers here:
What's Pros and Cons: putting javascript in head and putting just before the body close
(5 answers)
Closed 9 years ago.
What are the advantages of putting external javascript calls at the bottom of the page, just before the:
</body>
tag, as opposed to putting them within the:
<head></head>
Thanks.
It's always better to put your javascript just before the closing </body> tag, because it will guarantee that your styles and html code will load before any scripts not causing any delay.
Otherwise, your heavy scripts will load first with blank screen, and only after they are loaded, your page will appear.
Respect your users and let them navigate your website as soon as possible.
It is always best option to load the javascript before just closing the body.
It improve the javascript action which are scripted to execute on page load.
This question already has an answer here:
How to catch creation of DOM elements and manipulate them with jQuery
(1 answer)
Closed 9 years ago.
How can i run js-script just when div with #id is loaded in DOM ?
For what this is for me? Because i run js-script before document.ready() for div with #id, and i am not sure if this div with #id already exist.
ADDITIONAL
problem : when i put script in document.ready(), it is visible what willbe if i don't add this script for some seconds, but then - all is allright. So i write script outside of document.ready() and this helps. But i'm not sure that this will work every time.
If the div is loaded with the page, putting your code inside the document.ready will do. If it is loaded via Ajax or other, then after inserting the div, call the wanted code on it.
Yes you can use this one
$(document).ready(function(){
//Your code...
});
This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Getting contents of iframe
Javascript: I need two examples.
Get content of loaded iframe which src is not on same server as parent page.
Get content of loaded iframe which src is ON the same server as parent page.
By content I mean InnerTEXT or innerHTML, or anything. Goal is to transfer variable from one page that is not on same server to other. This was my first thought. If there is any other way to transfer variable within javascript.
Sounds like homework. What have you tried so far? Are you allowed to use jQuery? Show us your examples.
EDIT:
Since you are allowed to use jQuery try going down this path for your solutions:
$('#iframe').contents().find('input').val();
It is not possible to transfer a variable from another website. But you can call functions which are defined in parent.
You make this function on your main site:
function helloWorld(text) {
alert(text);
}
And you call from inside of the iFrame with parent.helloWorld('hiho!');. This should work with the same or any different domain, but you need to access the different page, to add the method call!