Member Avatar for Inny

supposing you had multiple scripts running, many remote hosted and you cant remember how many or which ones used a body onload tag.
Could you use a wildcard to cover them? for example, is something like this possible?

<body onload="popWindow();somefunction();"*"(); "*"();">

:?:

  • 4 Contributors
  • 6 Replies
  • 125 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by sharonm

Dani AI

Generated

No — there is no wildcard syntax for the onload attribute. As said, a wildcard would imply "call every function you can find," and HTML/JS provide no built-in shorthand for that. The usual solutions are: centralize your startup work into one dispatcher (what suggested), or attach multiple handlers programmatically so they do not overwrite each other.

A modern, simple pattern is to attach as many handlers as you need with addEventListener (no need to concatenate names or numbers):

window.addEventListener('load', popWindow);
window.addEventListener('load', spellchecker);

addEventListener lets multiple handlers coexist without clobbering earlier ones. For DOM-only initialization you can use DOMContentLoaded to run earlier than load (DOMContentLoaded, addEventListener).

If a prefix-based "wildcard" is wanted, you can implement a small runner that calls every global function whose name matches a prefix. Keep it safe by checking typeof and wrapping calls in try/catch so one failing handler does not stop the rest:

function callPrefixedOnLoad(prefix) {
  window.addEventListener('load', function () {
    for (var k in window) {
      if (Object.prototype.hasOwnProperty.call(window, k)) {
        var fn = window[k];
        if (typeof fn === 'function' && k.indexOf(prefix) === 0) {
          try { fn(); } catch (e) { console.error(k, e); }
        }
      }
    }
  });
}
callPrefixedOnLoad('_onload');

For : place your functions in a script file included on the page (or inline before you register them). Note that function declarations are hoisted but function expressions assigned to variables are not (hoisting). Best practice is to load or declare your functions before registering handlers, or use defer/place scripts at the end of the body so everything is defined by the time the event fires.

Recommended Answers

All 6 Replies

Member Avatar for MattEvans

O_O

the wildcard * generally relates to everything. If that was possible, your code would be saying "call every function you can find, and pass no parameters".

it would be more handy if you could go halfway, like onload = "wildfnc('_onload*')" to execute all functions prefixed with _onload....

But, unfortunately no. No such thing exists unless you implement it yourself.

The best way to manage such a thing is to append events to your body object from code rather than write them all in the onload attribute; that or call all of your onload functions from a single onload function.

Member Avatar for stymiee

Using a single onload function is the best way to go. This javascript function allows you to keep adding functions to the onload event without having to worry about the ones already added:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

Use like this to add a function to the onload event:

addLoadEvent(functionName1);
addLoadEvent(functionName2);
Member Avatar for Inny

Thankyou that looks easier! Do I need to add numbers and increment or just keep adding with a ';' at the end of each?

<script>
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
addLoadEvent(popwindow);
addLoadEvent(spellchecker);

</script>

Using a single onload function is the best way to go. This javascript function allows you to keep adding functions to the onload event without having to worry about the ones already added:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

Use like this to add a function to the onload event:

addLoadEvent(functionName1);
addLoadEvent(functionName2);
Member Avatar for stymiee

You have it perfect. Good luck. :)

Member Avatar for Inny

Thanks Again! :D

Member Avatar for sharonm

Using a single onload function is the best way to go. This javascript function allows you to keep adding functions to the onload event without having to worry about the ones already added:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

Use like this to add a function to the onload event:

addLoadEvent(functionName1);
addLoadEvent(functionName2);

I hope you don't mind another post on this subject so long after the initial post. I found myself in need of a way to handle multiple onload functions and found your post.
I am NOT an experienced javascript coder, I just know enough to get by. This is further complicated by the fact that I'm a programmer, and need to be able to implement this within a perl script.
So, I'm a little confused about the addLoadEvnt(functionName1) statements to add additional functions to the onLoad. If all I'm putting in there is the name of a function, then where are all the actual functions stored for it to pull the actual code in? I have several "routines" - one is a Timer function that calls a secondary function; another is a function to try to disable certain Ctrl+key combinations that are causing major programming problems (it also calls one or more functions); and there is at least one more styleswitcher function that has its own window.onLoad calls.
If I put the primary function into the addLoadEvnt - then do I store that function, as well as the other functions that IT calls in a common javascript file pulled in via the <script type="text/javascript" ... statement at the top of the page?

I hope I'm making sense!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.