Alternative position of script that needs to come after specific HTML element? - javascript

Sorry I couldn't articulate my question accurately.
I have a jQuery script that needs to be placed below the HTML element it is applied to and not in the head. IE 6 and IE 7 are generating operation aborted message since the script is not a directly child of Body tag. This seems to be a well known bug on IE.
I do not have the privilege to keep the script tag as a direct child of Body tag. Either it should be inside tag or it should be in the head. If I have it in the head, it obviously doesn't trigger since it should be below the HTML element it is applied to.
What are my options in this case?
Thanks!

Put it in the head, and move your code inside a document.ready handler, like this:
$(document).ready(function(){
// your code here
});
This way, your code will only run after the full HTML has been parsed.

You can write the code within head...Just need to write it inside the document ready block, so that it gets executed only after your DOM is ready..
$(document).ready(function(){.....your code......}
Hope that helps. Thank you.

Related

How can I extract the whole HTML of a page - before and after the DOM?

I'm trying to find a way to extract the HTML code of a web page using JavaScript in two editions:
Before the DOM / Before JS is applied
After the DOM / After JS is applied
All the JavaScript methods that I know just take it from the DOM element, like document.body or document.all... but non of them work specifically for before or after the DOM.
Added:
Just to focus the question further, this is not my page so I can't install any on the page, this is for any random web page.
Can you point me in the right direction? is there a specific method/command/process that is used in JavaScript and can do that? maybe I should stop the page load at specific point and take the code and then let it continue loading and take the code with the JS included?
Well, If you put a <script /> tag in the middle of your HTML your code will get executed before the continuation of the rest of your HTML.
also you can use
document.addEventListener("DOMContentLoaded", fn);
to call your function when the DOM is ready (it comes in the name of the event listener so sorry for over-explaination!)
Getting all the stuff is easy via the window object, can not imagine anything else you might need.
So if you want to do something before the DOM loads just put a <script /> tag at the top. if you want the dom to be ready use the DOMContentLoaded.
You can find great and complete documentation on this subject of script, async, defer on javascript.info. if there is anything that my explanation did not cover for you.

Is it possible body onload executes leaving unread code within?

I'm stumped with a very simple question. Since the <body> tag always precedes content, when does body onload execute; at the opening tag or at the closing tag? Can body onload advance to a point where it ignores code inside of it?
And so then maybe I skipped this part at the very basics of coding... If I open a tag with say, a style property, and don't close it, will it still execute?
Body itself is the content of your page, no pre-loading as such..
So if you run an onload event, this will trigger once the content of your body is ready and generally has rendered itself or is about to.
In general, you would create any content within the body tag or using a script at run time and then run a onload script to finalise everything.. This could be use to add javascript hover effects or to hide a progress bar for loading.. Generally once that script is done. The page should be ready for the user.
Code will never be ignored ever (with exception to crashes/cancelled requests), But it depends if the code is taking effect like it should.. You element might not be ready if your adding it dynamically..
Another big issue to watch out for while developing is cache, this is a nasty creature that will waste hours of your time...And last but not least, use the browser console to debug at various points and test what is happening.
As for closing tags, If you mean you you do not put the > character at the end, it will break the page.. In the case of tag like link.. But for a script, you must close it upto the point of the < /script > tag

Where to place $(document).ready(function()? [duplicate]

This question already has answers here:
document.ready inside body tag
(2 answers)
Closed 9 years ago.
We often read here and there, that we must place our js code either on the page head section or before (sorry) the end body tag. Discussions about this aside, I'm just looking to know what are the reading order for such things by the browsers (taking that they do act as equals here):
Can we place:
$(document).ready(function(){
No matter where on the page structure, because we are using $(document).ready or should we still place it on the head section ?
Can anyone please clarify this.
If my question isn't clear, I can rephrase.
You can place a script anywhere in the document. Best practice usually advises placing scripts in the footer for page load performance concerns. Further, best practice usually advises placing the scripts together for ease of maintenance.
However, per the spec, there is no restriction on where in the document you place a script tag. You may place them together in the header, at the bottom of the body, sprinkled all over the document, or any combination thereof.
The use of the jQuery construct $(document).ready has the same result regardless of where it is placed within the document. The key is to understand the functionality behind this construct:
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.
So, ready is similar to document.onload, but not the same. It doesn't matter where the code is, if you execute it when document.onload is fired or when jQuery fires ready. Code's placement in a document is only significant if it is NOT wrapped by some event handler/listener.
The only restriction on the location on $(document).ready is that it cannot happen before you include the jQuery library. $(document).ready is using jQuery, so if jQuery doesn't exist.... you can't use it.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
alert('executed as soon as it is reached (as the document is downloaded)');
$(document).ready(function () { alert('on jQuery ready'); });
</script>
</head>
<body onload="alert('executed on document.onload event');">
<script>
alert('executed as soon as it is reached (as the document is downloaded)');
$(document).ready(function () { alert('on jQuery ready'); });
</script>
</body>
</html>
Documentation
SCRIPT specification at W3 - http://www.w3.org/TR/html401/interact/scripts.html
script (html 5) specification at W3 - http://www.w3.org/TR/html-markup/script.html
Placing Javascript in your pages at quirksmode - http://www.quirksmode.org/js/placejs.html
Jquery ready - http://api.jquery.com/ready/
AFAIK, $(document).ready event gets raised after DOM is completely loaded so it doesn't matter where you place it.
But they say to write the script at end of the body because page will show up to the end user instantly and javascript will continue to run as background process.
The browser executes the script from the top to the bottom, so the srcipt in the head section will execute before the script in the body. I prefer to put the script undernith the html code, but generally it desn't matter much if you vait for the page to fuly load.
The document ready function will wait until the DOM is loaded before running. So technically it doesn't matter where you put it. Many people like putting script in the head, because it makes sure the script is read before the page is loaded. Other people like putting it at the very end (just before the end body tag) so that all of the elements of the page are loaded before the script reads them. But since you're waiting for the DOM to load anyway, it doesn't matter.
If you have a small function, then I would just put the document ready function in the head tags.
As far as i know, the BKM is to place it in the footer (although mostly developers tend to place it in the head tag).
Main reason - most of the document DOM is rendered to the browser prior to loading JS.

html injection using JS event

I wanted to know what is the primal event to use for injecting HTML code.
the Javascript code itself is injected using a chrome extension.
the HTML code is a message which should appear on top any other HTML.
moreover, it should appear to the user before the other html elements or as soon as possible.
I've looked for the right event and stumble upon with DOMContentLoaded. The problem is, the <div id="message"> is rendered after all the dom tree has loaded and that's not good enough for me.
is there another event for this cause?
Thanks!
p.s. HTML5 is an option for me if needed..
Well, jQuery have $(document).ready() function which is fired, when all DOM elements are ready. It is faster than window.onload function. Here is question about how get document.ready in clean JavaScript: $(document).ready equivalent without jQuery

Dynamically Inserting <script> tags into HTML on Page Load

I'm trying to dynamically insert the Tweetmeme button using Javascript. I'm currently using jQuery throughout the site. Here's the script that I'm using. I basically want to cycle through all the blog entries with a class of journal-entry and append the following JavaScript to the end. This Javascript comes straight from tweetmeme.com. This doesn't work for me though and it has something to do with the code between append(). It doesn't like the second set of script tags.
<script type="text/javascript">
$(document).ready(function() {
$('.journal-entry').each(function(index) {
$(this).append('<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>');
});
});
</script>
Any help is appreciated.
Thanks.
Don't do this.
Inserting <script> HTML content into the DOM is unreliable: it works subtly differently in different browsers, and jQuery won't protect you from the differences.
In particularly, writing innerHTML never causes a <script> element's content to execute, but subsequently moving the <script> element from where it is to a new parent (which is part of jQuery's append process) may cause the script to execute, but not always (it depends on the browser).
In any case, it'll never work, because looking at button.js, it is calling document.write(). That function only makes sense to call at initial document parsing time; if you call it from an event afterwards, the call will simply replace the entire page content, destroying your existing page. A script that calls document.write() can only be run at document load time, from inside the execution path of a <script> element. You can't include the script in dynamically-created content at all, because it's not designed for it.
(If it makes you feel any better, it's barely designed at all; the button.js script is a badly broken load of old crap, including improper URL-escaping—using escape instead of the correct encodeURIComponent—and missing HTML-escaping. You may be better off well away from these total idiots.)
The closing </script> in the string in your append(...) call is closing the overall <script>
Try splitting it up into two strings. E.g:
$(this).append('<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></'+'script>');

Categories