I&#39;m using Google Ajax API and they suggest I use `google.setOnLoadCallback()` to do various things related to their API but I&#39;m using also jQuery&#39;s `$(document).ready()` to do other JS things, not related to Google API.

Is it safe to mix these two approaches in one document? I did not notice any problems yet but I suppose it&#39;s a matter of scale.

google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

I want to run a function when the page is loaded, but I don’t want to use it in the `&lt;body&gt;` tag.

I have a script that runs if I initialise it in the `&lt;body&gt;`, like this:

&lt;!-- language: lang-js --&gt;

    function codeAddress() {
      // code
    }
    
&lt;!-- language: lang-html --&gt;

    &lt;body onLoad=&quot;codeAddress()&quot;&gt;

But I want to run it without the `&lt;body onload=&quot;codeAddress()&quot;&gt;` and I have tried a lot of things, e.g. this:

    window.onload = codeAddress;

But it is not working.

So how do I run it when the page is loaded?

How to run a function when the page is loaded?

I have an iFrame, where I want to send a JavaScript command after loading.
My current code looks like this:

    &lt;iframe src=&quot;http://www.test.tld/&quot; onload=&quot;__doPostBack(&#39;ctl00$ctl00$bLogout&#39;,&#39;&#39;)&quot;&gt;

But with this code the command isn&#39;t executed. What must I change to make it work?
Only Chrome and Firefox have to be supported.

iFrame onload JavaScript event

I&#39;ve been using [this function][1] to attach onload handler to a script tag, it seems to be the recommended way over the internet.  
Yet, it doesn&#39;t work in internet explorer, if page is loaded already (tested in ie 8). You can see that it works in normal browsers (fires alert when script is loaded).

Am I missing something?  
Thank you



  [1]: http://jsfiddle.net/yzbvy/1/

&#39;onload&#39; handler for &#39;script&#39; tag in internet explorer

In JavaScript, when I want to run a script once when the page has loaded, should I use `window.onload` or just write the script?

For example, if I want to have a pop-up, should I write (directly inside the `&lt;script&gt;` tag):

    alert(&quot;hello!&quot;);

Or:

    window.onload = function() {
        alert(&quot;hello!&quot;);
    }

Both appear to run just after the page is loaded. What is the the difference?


When to use &quot;window.onload&quot;?

Can you list the difference between `onload()` and `$(document).ready(function(){..})` functions in the using jQuery? 

Difference between onload() and $.ready?

I have a function within my angular controller, I&#39;d like this function to be run on document ready but I noticed that angular runs it as the dom is created.

     function myController($scope)
     {
         $scope.init = function()
         {
            // I&#39;d like to run this on document ready
         }

         $scope.init(); // doesn&#39;t work, loads my init before the page has completely loaded
     }

Anyone know how I can go about this?

How to run function in AngularJS controller on document ready?

Assuming I have no control over the content in the iframe, is there any way that I can detect a src change in it via the parent page? Some sort of onload maybe?

My last resort is to do a 1 second interval test if the iframe src is the same as it was before, but doing this hacky solution would suck.

I&#39;m using the jQuery library if it helps.

iFrame src change event detection?

I want to call a function after a document loads, but the document may or may not have finished loading yet.  If it did load, then I can just call the function. If it did NOT load, then I can attach an event listener. I can&#39;t add an eventlistener after onload has already fired since it won&#39;t get called.  So how can I check if the document has loaded?  I tried the code below but it doesn&#39;t entirely work.  Any ideas?

    var body = document.getElementsByTagName(&#39;BODY&#39;)[0];
    // CONDITION DOES NOT WORK
    if (body &amp;&amp; body.readyState == &#39;loaded&#39;) {
        DoStuffFunction();
    } else {
        // CODE BELOW WORKS
        if (window.addEventListener) {  
            window.addEventListener(&#39;load&#39;, DoStuffFunction, false);
        } else {
            window.attachEvent(&#39;onload&#39;, DoStuffFunction);
        }
    }

Javascript - How to detect if document has loaded (IE 7/Firefox 3)

Why do I get an error or Uncaught TypeError: Cannot set property &#39;innerHTML&#39; of null?
I thought I understood innerHTML and had it working before.

    &lt;!DOCTYPE HTML&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;

    &lt;script type =&quot;text/javascript&quot;&gt;
        what();
        function what(){
            document.getElementById(&#39;hello&#39;).innerHTML = &#39;hi&#39;;
        };
    &lt;/script&gt;

    &lt;/head&gt;
    
    &lt;body&gt;
    &lt;div id=&quot;hello&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

Cannot set property &#39;innerHTML&#39; of null

I&#39;m trying to load a set of scripts in order, but the onload event isn&#39;t firing for me.

        var scripts = [
            &#39;//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js&#39;,
            &#39;//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js&#39;,
            MK.host+&#39;/templates/templates.js&#39;
        ];

        function loadScripts(scripts){
            var script = scripts.shift();
            var el = document.createElement(&#39;script&#39;);
            el.src = script;
            el.onload = function(script){
                console.log(script + &#39; loaded!&#39;);
                if (scripts.length) {
                    loadScripts(scripts);
                }
                else {
                    console.log(&#39;run app&#39;);
                    MK.init();
                }
            };

            $body.append(el);
        }

        loadScripts(scripts);

I guess native events like el.onload don&#39;t fire when jQuery is used to append the element to the DOM. If I use native `document.body.appendChild(el)` then it fires as expected.


Trying to fire the onload event on script tag

I&#39;m trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can&#39;t figure out how to do this.

This is what I&#39;ve got so far:

    &lt;html&gt;
    &lt;head&gt;
     &lt;title&gt;Password Protected Page&lt;/title&gt;
     
     &lt;script type=&quot;text/javascript&quot;&gt;
     function FocusOnInput()
     {
     document.getElementById(&quot;PasswordInput&quot;).focus();
     }
     &lt;/script&gt;
     
     &lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
      body, html {height: 100%; padding: 0px; margin: 0px;}
      #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
      #middle {vertical-align: middle}
      #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
     &lt;/style&gt;
    &lt;/head&gt;
    &lt;body onload=&quot;FocusOnInput()&quot;&gt;
     &lt;table id=&quot;outer&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
      &lt;tr&gt;&lt;td id=&quot;middle&quot;&gt;
       &lt;div id=&quot;centered&quot;&gt;
      &lt;form action=&quot;verify.php&quot; method=&quot;post&quot;&gt;
       &lt;input type=&quot;password&quot; name=&quot;PasswordInput&quot;/&gt;
      &lt;/form&gt;
       &lt;/div&gt;
      &lt;/td&gt;&lt;/tr&gt;
     &lt;/table&gt;
    &lt;/body&gt;
    &lt;/html&gt;

How come that doesn&#39;t work while this works fine?

    &lt;html&gt;
    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    function FocusOnInput()
    {
         document.getElementById(&quot;InputID&quot;).focus();
    }
    &lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body onload=&quot;FocusOnInput()&quot;&gt;
      &lt;form&gt;
           &lt;input type=&quot;text&quot; id=&quot;InputID&quot;&gt;
      &lt;/form&gt;
    &lt;/body&gt;
    
    &lt;/html&gt;

Help is much appreciated :-)



Setting focus on an HTML input box on page load

I have a Help page, help.php that I am loading inside an iframe in main.php
How can I get the height of this page once it has loaded in the iframe?

I am asking this because I can&#39;t style the height of to iframe to 100% or auto. That&#39;s why I think I need to use javascript..
I am using jQuery

CSS:

    body {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 900px;
        height: 100%;
        margin: 0 auto;
        background: silver;
    }
    .help-div {
        display: none;
        width: 850px;
        height: 100%;
        position: absolute;
        top: 100px;
        background: orange;
    }
    #help-frame {
        width: 100%;
        height: auto;
        margin:0;
        padding:0;
    }


JS:

    $(document).ready(function () {
        $(&quot;a.open-help&quot;).click(function () {
            $(&quot;.help-div&quot;).show();
            return false;
        })
    })

HTML:

    &lt;div class=&#39;container&#39;&gt;
        &lt;!-- --&gt;
        &lt;div class=&#39;help-div&#39;&gt;
            &lt;p&gt;This is a div with an iframe loading the help page&lt;/p&gt;
            &lt;iframe id=&quot;help-frame&quot; src=&quot;../help.php&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;1&quot;&gt;&lt;/iframe&gt;
        &lt;/div&gt;	&lt;a class=&quot;open-help&quot; href=&quot;#&quot;&gt;open Help in iFrame&lt;/a&gt;
    
        &lt;p&gt;hello world&lt;/p&gt;
        &lt;p&gt;hello world&lt;/p&gt;
        &lt;p&gt;hello world&lt;/p&gt;
        &lt;p&gt;hello world&lt;/p&gt;
        &lt;p&gt;hello world&lt;/p&gt;
    &lt;/div&gt;


jquery get height of iframe content when loaded

I am trying to load a certain script after page load executes, something like this:


    function downloadJSAtOnload(){
                var element = document.createElement(&quot;script&quot;);
                element.src = &quot;scriptSrc&quot;;
                document.body.appendChild(element);
            }
    
             if (window.addEventListener)
                      window.addEventListener(&quot;load&quot;, downloadJSAtOnload, false);
                else if (window.attachEvent)
                      window.attachEvent(&quot;onload&quot;, downloadJSAtOnload);
                else window.onload = downloadJSAtOnload;


And while this script seems to execute and download &#39;scriptSrc&#39;, and append it right before the end of the body tag, it yields the following message (not an error) in the console (chrome)


***Failed to execute &#39;write&#39; on &#39;Document&#39;: It isn&#39;t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.*** 


What does this even mean? And am I supposed to do something differently? Even though I get the expected behavior?



Execute write on doc: It isn&#39;t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Currently I have an Angular.js page that allows searching and displays results. User clicks on a search result, then clicks back button. I want the search results to be displayed again but I can&#39;t work out how to trigger the search to execute.  Here&#39;s the detail:

 - My Angular.js page is a search page, with a search field and a search
   button. The user can manually type in a query and press a button and
   and ajax query is fired and the results are displayed.  I update the URL with the search term. That all works fine.
 - User clicks on a result of the search and is taken to a different page - that works fine too. 
 - User clicks back button, and goes back to my angular search page, and the correct URL is displayed, including the search term. All works fine.
 - I have bound the search field value to the search term in the URL, so it contains the expected search term. All works fine.

How do I get the search function to execute again without the user having to press the &quot;search button&quot;? If it was jquery then I would execute a function in the documentready function. I can&#39;t see the Angular.js equivalent.


How to execute AngularJS controller function on page load?

Is there a way to execute a JSF managed bean action when a page is loaded?

If that&#39;s relevant, I&#39;m currently using JSF 1.2.

Invoke JSF managed bean action on page load

I&#39;ve got the following code in a website:

     window.onload = resize;
     window.onresize = resize;
     
     function resize(){
      heightWithoutHeader = (window.innerHeight - 85) + &quot;px&quot;; 
      document.getElementById(&quot;main-table&quot;).style.height = heightWithoutHeader;
      document.getElementById(&quot;navigation&quot;).style.height = heightWithoutHeader;
     }

The `onresize` works fine, but the `onload` event never fires. I&#39;ve tried it in Firefox and Chrome and neither of them works.

Thank you for your help and go for the reputation! ;D

JavaScript event window.onload not triggered

Traditionally, to call a JavaScript function once the page has loaded, you&#39;d add an `onload` attribute to the body containing a bit of JavaScript (usually only calling a function)
 
    &lt;body onload=&quot;foo()&quot;&gt;

When the page has loaded, I want to run some JavaScript code to dynamically populate portions of the page with data from the server. I can&#39;t use the `onload` attribute since I&#39;m using JSP fragments, which have no `body` element I can add an attribute to.

Is there any other way to call a JavaScript function on load? I&#39;d rather not use jQuery as I&#39;m not very familiar with it.


All Onload Solutions on Gang of Coders

Total of 18 Onload Solutions