I'm working on a client project and I have to include their header and footer, which includes some core JavaScript files. I have a couple of PNGs on the page, but their core JS file is poorly coded and doesn't check for IE 7 before attempting to replace IMG tags that contain .png files with DIVS that use the AlphaImageLoader filter. The result is that in IE 7, all my .png images are replaced with DIV tags that have a default display: block, causing a linebreak after every single png image in my pages.

What I'd like to do is override their function with a better one or somehow prevent theirs from executing, but I cannot modify the JS file itself, which both defines the function and attaches it to the window onload event. I've tried redefining the function under the same name in several places (header, just before the /body tag, in $(document).ready, etc...) but the original function always seems to execute, presumably because the original function code is what is stored with the event handler, and not merely a pointer to the function.

Any way I can fix? Is there a way to selectively remove onload event handlers?

I'm working on a client project and I have to include their header and footer, which includes some core JavaScript files. I have a couple of PNGs on the page, but their core JS file is poorly coded and doesn't check for IE 7 before attempting to replace IMG tags that contain .png files with DIVS that use the AlphaImageLoader filter. The result is that in IE 7, all my .png images are replaced with DIV tags that have a default display: block, causing a linebreak after every single png image in my pages.

What I'd like to do is override their function with a better one or somehow prevent theirs from executing, but I cannot modify the JS file itself, which both defines the function and attaches it to the window onload event. I've tried redefining the function under the same name in several places (header, just before the /body tag, in $(document).ready, etc...) but the original function always seems to execute, presumably because the original function code is what is stored with the event handler, and not merely a pointer to the function.

Any way I can fix? Is there a way to selectively remove onload event handlers?

• javascript
• jquery

• Are they assigning it with an event listener, or just through window.onload? – Mike Robinson Commented May 11, 2009 at 21:10
• Does the JS file you are trying to override use jQuery? I think there is a solution if this is the case – Nadia Alramli Commented May 11, 2009 at 21:51
• 1 Can you look inside the JS and see how it was bound? It matters. – Paolo Bergantino Commented May 12, 2009 at 1:21
• It was bound using window.attachEvent – Chris Commented May 12, 2009 at 6:27

7 Answers 7

If that's the only thing running at load, I think you could do

window.onload = null;

If there are other things running, I guess you'd have to reattach them. It's a little fragile, I suppose.

In IE7 you can use the detachEvent method:-

window.detachEvent("load", fn)

where fn is the function that was attached, however since there is jquery in this mix it may be a tall order getting hold of the actual function that was attached. Most likely the actual function attached will be anonymous.

A large IFRAME between header & footer should do the trick.

Well, depending on how it was bound, you might be able to get away with something like:

window.onload = function(){
  var alert=function(a){
    console.log(a);
  }
  window.onload();
}

Obviously, you'd want to redefine something other than alert, but that might work.

maybe if that's all it does, you can write a function to reverse it, look for all png images and strip away the div, and if you want to skip certain images you can implant an attribute to those you want to treat differently

another way is to trick the function by not having the png part of the image file name, and on load, append the .png (after their onload)

or maybe you can replace your png images with another tag, and replace onload

by the way, you can know exactly whats inside the onload, if you just alert window.onload, if there is nothing but that functionality, set window.onload = null;

Have you tried using $(window).unbind("load")?

Do you know the name of the function that replaces the PNG images? If so you might be able to override the existing function by doing something like this:

// Assuming PNG function is called pngSwap
function pngSwap() {
    alert('png swap');              
}

$(document).ready(function() {
    if (window.pngSwap && window.pngSwap.constructor === Function) {
        var oldFunc = window.pngSwap;
        window.pngSwap = function() {
            alert('new png swap');
        }
    }

    pngSwap();
});