40

I'm making a JS/PHP plugin for distribution. I want it to be as easy to install as this:

<HTML>
<HEAD>
<TITLE>Testing my Plugin</TITLE>
<?php
  include 'path/to/myPlugin.php';
  echo getMyPluginHeadContent();
?>
</HEAD>
<BODY>
<?php
  echo getMyPluginContent("Arguments will go here");
?>
</BODY>
</HTML>

However, I want this plugin to attach a window resize listener without overriding window.onresize, in case there are any other scripts that also require the use of that method. Is there any javascript command like document.addEventListener("resize", myResizeMethod, true);? I know that's not it, because that's not working, and the MDN and W3C are very vague about what arguments addEventListener takes.

I do not want an answer telling me to use window.onresize = myResizeMethod or <BODY ONRESIZE="myResizeMethod">, as these are not as plugin-friendly.

3
  • Since you are trying to add this to the window, have you tried window.addEventListener?
    – Kyle
    Nov 30, 2012 at 18:52
  • 2
    Pretty much any <element>.on<event> = <function> can be turned into a <element>.addEventListener(<event>, <function>)
    – bhamlin
    Nov 30, 2012 at 18:54
  • @bhamlin : Insightful comment, thank you. Jan 12, 2015 at 10:47

3 Answers 3

82

Since you are trying to call this function on the resize of the window, you will want to bind the function to the window and not to the document. To support versions of IE that are less than 9, you will want to use attachEvent. Please note that attachEvent requires you to specify the on keyword. Here is an example:

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        console.log('addEventListener - resize');
    }, true);
}
else {
    //The browser does not support Javascript event binding
}

Similarly, you can remove events in the same way. When using removeEventListener, make sure that you pass the same value of useCapture as you did when calling addEventListener. This is the third parameter which is the true/false value.

if(window.detachEvent) {
    window.detachEvent('onresize', theFunction);
}
else if(window.removeEventListener) {
    window.removeEventListener('resize', theFunction, true);
}
else {
    //The browser does not support Javascript event binding
}
10
  • Other than forgetting a ); in your example code, this is perfect! Thank you!
    – Ky -
    Dec 1, 2012 at 0:24
  • @Supuhstar Oops, fixed the code. Glad you were able to get it working.
    – Kyle
    Dec 3, 2012 at 12:50
  • I've taken to putting this in the else: var oldresize = window.onresize; window.onresize = function() { if(oldresize) oldresize(); /* My code here... */ }. Then to detatch it, I do window.onload = oldload;.
    – Ky -
    Apr 1, 2014 at 15:49
  • @Supuhstar I'm confused as to why you are doing that. attachEvent and addEventListener keep the order of functions bound to them. To detach, you just need to use the correct function with the function as the argument. Just remember that your function must be stored in a variable var myFunc = ... to ensure that the memory address is the same to unbind.
    – Kyle
    Apr 1, 2014 at 17:37
  • 1
    @Supuhstar I hope that you never come across a browser that is lacking that support (those would be very old browsers), but I am glad that you have a workaround for it.
    – Kyle
    Apr 1, 2014 at 18:49
33

You don't resize the document but the window. This works :

window.addEventListener("resize", function(){console.log('resize!')}, true);
3
  • 2
    As an addition to this, you will want to use attachEvent for versions of IE < 9.
    – Kyle
    Nov 30, 2012 at 18:56
  • @Kyle I didn't knew that (my sites are either not IE8 compatible or jquery based). Feel free to build your own answer. I see in your comment that you knew for window vs document too. Nov 30, 2012 at 18:58
  • This is trigger more than one in IE 8. I couldnt find why that happens. Nov 12, 2014 at 15:14
3

I highly recommend ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Example of use:

const resizeObserver = new ResizeObserver(e => {
    console.log(e);
});

resizeObserver.observe(document.body);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.