Is there an attribute that I can place JavaScript into that executes as soon as the element is finished parsing by the browser?
In effect, I would like to have an onload and be able to pass this as a parameter to a function.
The only work around I have found is specifying an id on the element and passing that to a function (within a SCRIPT tag) immediately after my element.
I'd like this:
<div onload="doSomething(this);"></div>
Instead of this:
<div id="myId"></div>
<script>doSomething("myId");</script>
Also, the solution should be cross browser compatible.
You do not admit to this openly, but the only reason you 'd want to do something like that is in order to iterate over a number of elements and perform the same kind of processing on all of them. If so, you are headed down the wrong path.
Simply give all these elements a common class and then use e.g. document.querySelectorAll to find them and do what you need. You can do this when the load event triggers for the body element.
For normal page loads I don't believe there is that level of granularity. You can detect when ALL of the HTML is loaded and when is has ALL finished rendering. Most people just process things when the page is ready and iterate over the elements in-turn.
Related
i have the following html output of a tool thats i'm developing:
<button>a</button>
<script>$('what to wrtie here to select the previous button element?').click(function(){alert ('a clicked !');});</script>
<button>b</button>
<script>$('same here').click(function(){alert ('b clicked !');});</script>
i need the selector in each script tag to select the previous element.
using id selector cant be applied since the tool don't generate ids for elements.
thanks.
ANSWER:
$('script').last().prev().click(...
as Niklas said the current executed script is the last one in the list
This is not possible without an id or some other kind of reference to either the button object or the script tag itself.
It's not possible to do because the script is not executed from where its element is located in the DOM. Instead it's executed with reference to the whole window.
Actually, there's a pretty good answer here: How may I reference the script tag that loaded the currently-executing script?
In short, the currently running script is the last element in the list.
well , i really don't recommend what you are doing first lets talk about your approach,
this kind of code should be wrapped in a ready event and when the DOM is ready all the registered code associated with that event will run , so no way to understand what script tag the code were in
what should happen is moving all the script tags to its own file and using selectors to select what elements you want or selecting them dynamicly using prev,next, parents, etc
Edit
i am wrong about not being able to get the script tag #Niklas answer is the right one, but i am still thinking very wrong to do so
There is no way of doing this (referring to the script tag that contains the script) that I know of. The best approach here would be to generate an ID for each element and aggregate your script into a single script tag.
That up there is the correct solution. The secret, naughty solution is this (spoiler):
<button>a</button><script>
//script#0001
$('script:contains("#0001")').prev().click(function(){
alert('foo');
});</script><button>b</button><script>
//script#0002
$('script:contains("#0002")').prev().click(function(){
alert('bar'); });</script>
DON'T USE IT
I want to create a set of elements to add to a HTML document using JQuery's $(document.createElement()). I know $(document).ready() is required before starting using document elements.
However, is it necessary to use $(document).ready() in order to create elements with $(document.createElement())? In other word, can I use $(document.createElement()) in a document before it is ready?
You can create a new node at any time. But if you're going to be inserting it into the page's DOM, then you'll have to use .ready(), otherwise there's no guarantee that the spot you're trying to insert into exists yet.
I create new nodes before ready when I preload my images in the head... so It's not totally essential as a general rule or anything.
Based on a click event on the page, via ajax I fetch a block of html and script, I am able to take the script element and append it to the head element, however WebKit based browsers are not treating it as script (ie. I cannot invoke a function declared in the appended script).
Using the Chrome Developer Tools I can see that my script node is indeed there, but it shows up differently then a script block that is not added dynamically, a non-dynamic script has a text child element and I cannot figure out a way to duplicate this for the dynamic script.
Any ideas or better ways to be doing this? The driving force is there is potentially a lot of html and script that would never be needed unless a user clicks on a particular tab, in which case the relevant content (and script) would be loaded. Thanks!
You could try using jQuery... it provides a method called .getScript that will load the JavaScript dynamically in the proper way. And it works fine in all well known browsers.
How about calling eval() on the content you receive from the server? Of course, you have to cut off the <script> and </script> parts.
If you're using a library like jQuery just use the built-in methods for doing this.
Otherwise you'd need to append it to the document rather than the head like this:
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></scr" + "ipt>");
In all honesty, I have no idea why the script tag is cut like that, but a lot of examples do that so there's probably a good reason.
You'll also need to account for the fact that loading the script might take quite a while, so after you've appended this to the body you should set up a timer that checks if the script is loaded. This can be achieved with a simple typeof check on any global variable the script exports.
Or you could just do an eval() on the actual javascript body, but there might be some caveats.
Generally speaking though, I'd leave this kind of thing up to the browser cache and just load the javascript on the page that your tabs are on. Just try not to use any onload events, but rather call whatever initializers you need when the tab is displayed.
Is it possible to modify the DOM during or before the initial DOM parsing? Or do I have to wait until the DOM is parsed and built before interacting with it? More specifically, is it possible to hinder a script element in DOM from running using userscripts/content scripts or similar in chrome or firefox?
Tried using eventListeners on DOMNodeInserted before the DOM is parsed, but these are only fired after the DOM is built.
These are two separate questions:
1. Is it possible to modify the DOM during or before the initial DOM parsing?
Yes. As soon as the browser builds the root element, then you can start querying and mutating the DOM. Note that when your script runs, some of the page may still yet be unparsed, perhaps even still in transit on the network. Your script generally has access to any element declared in the source before the script tag containing/calling your script. This includes parent elements containing your script tag.
2. Is it possible to hinder a script element in DOM from running using userscripts/content scripts or similar in chrome or firefox?
No. All scripts are executed and one script can't prevent another script's initial execution. However, you can perhaps go back through and remove event handlers, and otherwise attempt to counteract the effects of a script. Although this scenario seems a bit shady and/or against the grain of normal JavaScript usage.
I've actually looked into this a lot while developing an adblocker for Chrome. Basically, you can't use just Javascript to stop Javascript, especially since it would run simultaneously with the script element in question. So even if it would work it would cause a race condition.
you can modify elements during document parsing, but after than this element has added to dom.
for example
<div id="example"></div>
<script>
document.getElementById('example').innerHTML = 'hello';
</script>
<div>something else</div>
Is it possible to modify the DOM during or before the initial DOM parsing?
Yes it is possible.
Start by completely preventing the document from getting parsed altogether then on the side, fetch the same document, do any processing on this document and then inject the resulting document in the page.
Here is how I currently do just that https://stackoverflow.com/a/36097573/6085033
I have html-pages with links where i want to attach a function to their onclick event. One way to do it is of course:
Save
But I know this is not the best practice. So instead I wait for window.onload, loop through the links and attach the save-function to the links with rel="save". The problem with this is that it waits until the whole page has finished loading which can be several seconds after the link is displayed and clickable.
So is there another way to do this? Avoiding onclick in the html but that makes it work immediately when the link is rendered.
Internet Explorer has a handy attribute for <script> tags called defer. It's for delaying the parsing of a script until the document has finished loading. For other browsers that support it, you can use DOMContentLoaded, as someone else suggested and for browsers that don't support either you can fall back to onload.
<script type="text/javascript" defer>
//- Run this code when the DOM parsing has completed
</script>
I did a quick Google search for "DOMContentLoaded defer" and found the following page that might help:
http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/domcontentloaded-event-for-browsers
In your case, you can just leave that as it is. Stick to the simplest possible thing, even if it is not the general best practice.
You could try DOMContentLoaded event instead of load. IE also gives you the defer attribute for script tags, which defers execution until the DOM is loaded. If those don't work for you, then you are stuck with the solutions you mention, as far as I know.
I don't know if this is appropriate for your solution, but you could insert script immediately below the are with the links you need altered. This script would not be wrapped in a function, allowing the browser to execute it immediately when seen. The effect is that you can run script before the full page is loaded, altering only the items that exist above the script being run. (If you reference something below the script, it will fail.)
BTW, this is almost certainly not a best practice, and some would probably label it a worst practice.
How about this?
Save
Note: This solution requires to users to have Javascript enabled. Not exactly best practice, but may be suitable for your scenario.
The ideal here would be to use the ideas of Unobtrusive Javascript.
In this way, if the Javascript isn't loaded the link would still do something. It's a link right, so it leads the user to another piece of content? - this should work without Javascript. And if the functionality attached to the links can ONLY work with Javascript you should create and insert them into the DOM with Javascript (they aren't clickable if they aren't there...).
(Otherwise how about delegating the click event to a wrapper element? Does that work before the element is complete?)
edit: Oh, and "save" sounds very much like it ought to be a button in a form rather than a link. The Unobtrusive JS stuff still applies though.