Resize By Iframe

[tomas-sereikis]

Hi,

So i saw issue A method to support IE11 without having to rely on MutationObserver #2 and came up with idea of how to catch resize event, so what are your thoughts.

(function($) {
    var stylesCreated = false;
    var createStyles = function() {
        var style = $('style');
        style.text('.jq-custom-frame-resize{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:-1;background:transparent;}');
        $('head').append(style);
    };

    $.fn.elementResize = function(fn) {
        if (stylesCreated === false) {
            createStyles();
        }

        var onFrameResize = function() { window.onresize = document.resizeCallback; };

        var frame = document.createElement('iframe');
        frame.setAttribute('src', 'javascript:;');
        frame.className = 'jq-custom-frame-resize';
        this.append(frame);

        var script = frame.contentWindow.document.createElement('script');
        script.textContent = ['(', onFrameResize.toString(), ')();'].join('');
        frame.contentWindow.document.resizeCallback = fn;

        var style = document.createElement('style');
        style.type = 'text/css';
        style.textContent = 'body,head{height:100%} body{margin:0;padding:0;}';

        var head = frame.contentWindow.document.querySelector('head');
        head.appendChild(script);
        head.appendChild(style);
    };
})(jQuery);

it looks simpler it works so... why is your way better?

[sdecima]

Hi! The way it is implemented in my code is by no means 'better', it is just one way to deal with detecting resizes.
Some people did point out that using an <iframe> (or an <object>) could be a little easier on the browsers' drawing resources, but on the other hand creating <iframe>'s for each element we want to observe could also be using some extra memory.

I'll do some performance testings and if this method is better, then I'll implement this solution over the scroll-events I'm using in the current version.

Thanks!