html injection using JS event - javascript

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

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.

jQuery doesn't fire twice after call to .load()

I want to change the content of a div (#mydiv) via AJAX.
To do that I create a button (#change-button) inside #mydiv that trigger the following jQuery script
$(#change-button).on("click", function(){
$("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});
Basically I replace the text in #mydiv with the new page's one.
This code works fine for the first time, but if I click again on the freshly loaded #change-button jQuery doesn't fire anymore.
I understand the theory: the new #mydiv that has been injected by .load() is not seen by the DOM, so the jQuery script doesn't work.
I found at least two similar questions on SO, but none was properly answered and overall none seems to solve my problem. Can anyone explaining clearly the best practice in these cases.
Here is the other questions:
Update DOM after insert in jQuery
.on()-Function does not rebuild DOM
Thank you
Use delegation like this:
$("body").on("click","#change-button", function(){
$("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});
I think problem is because y our contents are dynamically loaded, so they are not present at the time of event binding. That's why it's not firing.
You can use delegation like bellow
$(document).on("click",'#change-button',function(){})

Javascript and jQuery Execution/Sequence

A question/clarification regarding Javascript/jQuery execution and it's sequence.
Please excuse me if I seem to answer my own question here, but I feel I'm missing a key something in this process.
I was told my selectors weren't taking because the DOM wasn't ready which had brought this question. Script was initially in the head using the ready jQuery ready method.
Thanks everyone.
Problem:
No access to Drupal template files.
Can only add in the head.
Appending via jQuery isn't too useful with the script tag.
Our solution currently is linking to the file in the markup.
I'm really seeking clarification though to the process here.
Context:
(Sorry bout that)...
Element wasn't targeted by my selector, from the script in the head. Syntax was correct, as it targeted the HTML tag without issue.
My understanding was the ready method/resulting listener would trigger after the DOM was fully constructed.
What I believe I already know:
I know scripts should ideally be placed just above the closing body tag in the markup.
I know that when the tokenizer encounters a script tag, it stops everything and executes the script (unless defer/async).
I know this is why they should ideally be placed above the closing body tag so the DOM is ready.
I know that the jQuery ready method attaches a listener, when the browser is switched to it's ready state after the DOM has been loaded, it fires.
The Questions:
Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?
Is this really just to avoid colliding/overwriting multiple window.onloads? (Should've clarified.)
Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?
Wrong. The ready() method gets called only when the DOM has fully loaded, all ready() does is that it establishes a listener that waits for the DOM to load so that statements inside the ready() method get executed when the DOM is ready to be manipulated, in other words it adds a listener to the loaded event that gets called and executed only when the document has full loaded.
Is this really just to avoid colliding/overwriting multiple onloads?
What do you really mean by "colliding/overwriting" ? You can have several listeners listening to the same events in JavaScript, and they won't overwrite or collide with each other.
From your question:
I know that the jQuery ready method waits until the browser is switched to it's ready state after the DOM has been loaded.
Well, sort of. The jQuery ready method doesn't wait. It attaches an event listener. The function is attached, but not executed. The function is only executed when the DOM is ready; the rest of the page continues loading.
You're really in the sphere of micro-optimisation here. Yes, placing script elements at the end of the body is ideal, but it will make minimal difference in reality, unless you have a huge, complex and time-consuming script.

If inline JavaScript code will be executed before document load event?

I have a page with <form> tag. Inside a form there is a lot of html plus some inline JavaScript at the very end of the <form> tag.
I listen to document load event. Can I be 100% sure, that when document load will be fired, all this inline JavaScript code has been already executed?
Example of markup:
<body>
<form>
--html controls---
<script type="text/javascript">
--some code to run here--
</script>
</form>
</body>
My thoughts that answer is yes, inline JavaScript will be executed before document load, but I want to find evidence.
edit
live demo
Document load fires only when all html controls loaded and JavaScript (inline or with src attribute)loaded and interpreted. Am I correct with this statement?
Unless you put the code you want to execute in the domready callback function, your inline javascript code will be executed immediately when you load the page (before the the domready).
Inline script will execute immediately as soon as the script tag finishes parsing, so you won't be able to access the rest of the document yet. On the other hand, it allows you to write additional HTML at that point in the document.
Note that Firefox 3.5 had a bug whereby you could set the defer attribute on the inline script and it would not execute immediately. This non-standard behaviour was fixed in Firefox 3.6.
I think you have no guarantees
If it is a slow javascript (emscripten) i think it is possible that the code is still beeing executed while the onload fires.
but i could not find clear documentation:
https://developer.mozilla.org/en/DOM/window.onload
http://msdn.microsoft.com/en-us/library/ie/cc197055%28v=vs.85%29.aspx
http://www.w3.org/TR/html4/html40.txt :
onload = script [CT]
The onload event occurs when the user agent finishes loading a
window or all frames within a FRAMESET. This attribute may be
used with BODY and FRAMESET elements.
so I can't find guarantees, you can either test (with something heavy, e.g. a demo from here https://github.com/kripken/emscripten/wiki), hpe for the best, or build in a savequard of your on that checks weather your inline script completed

Execute jQuery after other scripts?

I'm trying to use jQuery to change some styling on my page. The page is made dynamically by executing another JavaScript file.
Right now I have
$(window).load(function(){
$('p').css('font','green');
});
Which does nothing.
$(document).ready(function() will change the static part of the page, but not the generated part.
If I just type $('p').css('font','green'); in the console, the expected results will happen. What is going on?
I'm guessing you are asking to be able to bind events to objects?
If so, look up the jQuery live() function: http://api.jquery.com/live/
If you are simply trying to apply CSS Styles to the page, you're better off relying on actual CSS style sheets.
Instead of listening for the document ready event, can you listen to an event fired by a workcomplete script building the page?
Or can you test for something in the page to indicate it's done every 100ms and then fire such an event yourself?

Categories