Is there any javascript document loading event which which will activate after: the html is loaded but the not displayed in the browser?
HTML is displayed as it loads, so no, there's not an event like that. Are you perhaps looking for something like jQuery's $(document).ready()[API Ref] event?
If not that, then give us a little more context and we'll try to help you out.
You could load the HTML through an AJAX call and display it when you feel like it, but that would be a (slightly) more manual process.
Related
I have an embedded pdf using an object tag. I want to know when the object's readyState==4 (or whatever)
I find jQuery's ready() but that looks like it only works on document load.
Other code out there seems to just loop through checking the ready sate, but that seems a little hacky to me.
Is there a nice clean way to do something like:
$("#pdfObject").onStateChange = function(state) {
if(state==4) ....
}
you get the idea.
A simple solution (tested in Chrome and FF) would be to embed the pdf in an iframe and listen for the iframe's load event (shown inline for simplicity). However, this does not seem to work in IE, so if I were you, I'd just stick to polling for readyState
<iframe
src="http://www.epa.gov/region10/pdf/ph/sitewide/bera_draft_final_7-1-2011.pdf"
onload="alert('done')"></iframe>
http://jsfiddle.net/8x5AA/
jQuery does not know if pdf document has loaded, i would suggest using another library that can help you out with PDF documents, check you http://pdfobject.com/ and you can find out if the document has been rendered by calling
PDFObject.embed(targetID)
I am making an ajax request to a file and as part of the returned html, there are a few scripts. I am appending the results to a div in my file.The problem is that the code I am inserting has bind tags and they apparently don't work. I have tried replacing my bind functions with a quick console message and I see that it is inserting the script. How do I get a click event to work while appending the script, is this even possible? Thanks so much!
PS. I know .append() doesn't add the script to the DOM and that I can't view it while browsing the code.
So, I made a quick fiddle...
http://jsfiddle.net/xqnWF/4/
And, as you can see if you click "Trigger" and then "Button", it works as intended. Could you shed some more light on the sequence of events or the dom model at the time of binding?
You should use the eval(); function on the data once appended
I'm working with Sharepoint 2007. I use the built in AssetImagePicker.aspx and I need to retrieve the image url from that page and use it in my custom webpart.
I want to run my javascript code to run when clicking the OK button of the AssetImagePicker.aspx but I can't find a way to do that.
Does anyone know how to do this?
Thanks
Not sure if I'm understanding the question properly, and I know nothing about Sharepoint (and AssetImagePicker.aspx) but it sounds like you want to add an event handler to the OK button: to run a function when the click event of the button is fired.
You can either code event handling yourself (see W3Schools or Quirksmode for examples of this) or (probably better) use a library like jQuery.
I have a multi-frame layout. One of the frames contains a form, which I am submitting through XMLHttpRequest. Now when I use document.write() to rewrite the frame with the form, and the new page I am adding contains any javascript then the javascript is not exectuted in IE6?
For example:
document.write("<html><head><script>alert(1);</script></head><body>test</body></html>");
In the above case the page content is replaced with test but the alert() isn't executed. This works fine in Firefox.
What is a workaround to the above problem?
Instead of having the JS code out in the open, enclose it in a function (let's call it "doIt"). Your frame window (let's say it's name is "formFrame") has a parent window (even if it's not visible) in which you can execute JS code. Do the actual frame rewrite operation in that scope:
window.parent.rewriteFormFrame(theHtml);
Where rewriteFormFrame function in the parent window looks something like this:
function rewriteFormFrame(html) {
formFrame.document.body.innerHTML = html;
formFrame.doIt();
}
Workaround is to programmatically add <script> blocks to head DOM element in JavaScript at Callback function or call eval() method. It's only way you can make this work in IE 6.
Another possible alternative is to use JSON, dynamically adding scripts references which will be automatically processed by browser.
Cheers.
In short: You can't really do that. However JavaScript libraries such as jQuery provide functionality to do exactly that. If you depend on that, give jQuery a try.
Eval and/or executing scripts dynamically is bad practice. Very bad practice. Very, very, very bad practice. I can't stress enough, how bad practice it is.
AKA.: Sounds like bad design. What problem are you trying to solve again?
You could use an onload attribute in the body tag (<body onload="jsWrittenLoaded()">).
I have a javascript function that manipulates the DOM when it is called (adds CSS classes, etc). This is invoked when the user changes some values in a form. When the document is first loading, I want to invoke this function to prepare the initial state (which is simpler in this case than setting up the DOM from the server side to the correct initial state).
Is it better to use window.onload to do this functionality or have a script block after the DOM elements I need to modify? For either case, why is it better?
For example:
function updateDOM(id) {
// updates the id element based on form state
}
should I invoke it via:
window.onload = function() { updateDOM("myElement"); };
or:
<div id="myElement">...</div>
<script language="javascript">
updateDOM("myElement");
</script>
The former seems to be the standard way to do it, but the latter seems to be just as good, perhaps better since it will update the element as soon as the script is hit, and as long as it is placed after the element, I don't see a problem with it.
Any thoughts? Is one version really better than the other?
The onload event is considered the proper way to do it, but if you don't mind using a javascript library, jQuery's $(document).ready() is even better.
$(document).ready(function(){
// manipulate the DOM all you want here
});
The advantages are:
Call $(document).ready() as many times as you want to register additional code to run - you can only set window.onload once.
$(document).ready() actions happen as soon as the DOM is complete - window.onload has to wait for images and such.
I hope I'm not becoming The Guy Who Suggests jQuery On Every JavaScript Question, but it really is great.
I've written lots of Javascript and window.onload is a terrible way to do it. It is brittle and waits until every asset of the page has loaded. So if one image takes forever or a resource doesn't timeout until 30 seconds, your code will not run before the user can see/manipulate the page.
Also, if another piece of Javascript decides to use window.onload = function() {}, your code will be blown away.
The proper way to run your code when the page is ready is wait for the element you need to change is ready/available. Many JS libraries have this as built-in functionality.
Check out:
http://docs.jquery.com/Events/ready#fn
http://developer.yahoo.com/yui/event/#onavailable
Definitely use onload. Keep your scripts separate from your page, or you'll go mad trying to disentangle them later.
Some JavaScript frameworks, such as mootools, give you access to a special event named "domready":
Contains the window Event 'domready', which will execute when the DOM has loaded. To ensure that DOM elements exist when the code attempting to access them is executed, they should be placed within the 'domready' event.
window.addEvent('domready', function() {
alert("The DOM is ready.");
});
window.onload on IE waits for the binary information to load also. It isn't a strict definition of "when the DOM is loaded". So there can be significant lag between when the page is perceived to be loaded and when your script gets fired. Because of this I would recommend looking into one of the plentiful JS frameworks (prototype/jQuery) to handle the heavy lifting for you.
#The Geek
I'm pretty sure that window.onload will be called again when a user hits the back button in IE, but doesn't get called again in Firefox. (Unless they changed it recently).
In Firefox, onload is called when the DOM has finished loading regardless of how you navigated to a page.
While I agree with the others about using window.onload if possible for clean code, I'm pretty sure that window.onload will be called again when a user hits the back button in IE, but doesn't get called again in Firefox. (Unless they changed it recently).
Edit: I could have that backwards.
In some cases, it's necessary to use inline script when you want your script to be evaluated when the user hits the back button from another page, back to your page.
Any corrections or additions to this answer are welcome... I'm not a javascript expert.
My take is the former becauase you can only have 1 window.onload function, while inline script blocks you have an n number.
onLoad because it is far easier to tell what code runs when the page loads up than having to read down through scads of html looking for script tags that might execute.