Uncaught TypeError: Cannot read property 'safari' of undefined

Question

I have this jjavascript to resize iframes:

 $(function () {

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                    iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
                }
            }

            if ($.browser.safari || $.browser.opera) {

                iFrames.load(function () {
                    setTimeout(iResize, 0);
                });

                for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
                }

            } else {
                iFrames.load(function () {
                    this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                });
            }

        });

In chrome, it has trouble here:

 if ($.browser.safari || $.browser.opera) {

Is there any reason why I get this error? I am using the latest JQuery?

Thanks

Answer 1

You are probably using jQuery 1.9 or above, in which case $.browser was officially removed after being deprecated since 1.3.

You can use jQuery migrate which will patch it, but it's better to move to a feature specific approach instead of browser specific approach. Modernizr is great for this.

Answer 2

jquery recommends against $.browser... use $.support instead..

if $.browser.safari (or opera or whatever your trying to access) doesn't exist it throws an error. check if its undefined