Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Attach function to DOMWindow Object

Tags:

javascript

I have this nice little snippet i've made for getting browser position:

if (!window.position) {
    window.position = function() {
        return navigator.appName.toLowerCase().indexOf("explorer") >= 0 ? { x: window.screenLeft, y: window.screenTop } : { x: window.screenX, y: window.screenY };
    };
};

It works great, what i'm wondering is, anyone know (i can't seems to find/remember if it exist) if there is something like a "_prototype" so that I can attach the function permanently. This would be useful in the case I have something like:

var bob =   window.open(...);

So then I could say:

var bobSposisition = bob.position(); // and of course get the same thing on bob that i'm getting on my current parent window.

Updated after answered [added fun snippet!]


This question was old and a bit unthought, but if it helps ya, you may also be interested in the following snippet!

;;(function() {
    "use strict";
    /** window.position
     *  Add `position` method to windows object that allows for detection of the current browser window position.
     *
     *  @returns Object Object of x and y points of current position. Also updates window.position properties, as neccesary.
     *  
     *  @property INT window.position.originX Original X point upon page load. Never updates, unless page is reloaded.
     *  @property INT window.position.originY Original Y point upon page load. Never updates, unless page is reloaded.
     *  @property INT window.position.lastX Last X Point at time of last call to window.position() method. Only updates if current position has changed since last call.
     *  @property INT window.position.lastY Last Y Point at time of last call to window.position() method. Only updates if current position has changed since last call.
     *  @property INT window.position.x Current X Point at time of last call to window.position() method. Updates everytime window.position() method is called.
     *  @property INT window.position.y Current Y Point at time of last call to window.position() method. Updates everytime window.position() method is called.
     */
    window['position'] = function() { var position = function() { var a = 0 <= navigator.appName.toLowerCase().indexOf("explorer") ? { x: window.screenLeft, y: window.screenTop } : { x: window.screenX, y: window.screenY }; void 0 == window.position && (window.position = {}); void 0 == window.position.history && (window.position.history = []); if (void 0 == window.position.lastX || a.x != window.position.x) window.position.lastX = window.position.x; if (void 0 == window.position.lastY || a.y != window.position.y) window.position.lastY = window.position.y; window.position.x = a.x; window.position.y = a.y; window.position.history.push({ x: a.x, y: a.y, last: { x: window.position.lastX, y: window.position.lastY } }); return a; }, pos = position(); position.originX = position.x = pos.x; position.originY = position.y = pos.y; position.history = [{ x: pos.x, y: pos.y, last: { x: pos.x, y: pos.y } }]; return position; }();
})();

/*  To Add To jQuery, simply insert the following after above code and after jQuery is added to page    */

if (jQuery) {
    (function($) {
        /** jQuery(window).position()
         *
         *  @description As is, jQuery's `.position` method errors out when applied to '$(window)'.
         *  The following extends the `.position` method to account for `window` if `window.position` exist.
         *
         *  @example $(window).position();
         *      Will output an Object like:
         *      { x: 2643, y: 0, top: 0, left: 2643, lastX: 1920, lastY: 0, originX: 1920, originY: 0 }
         */
        if (window.position && $.fn.position) {
            $.fn.originalPosition = $.fn.position;
            $.fn.position = function() {
                return this && "object" == typeof this && this[0] == window ? $.extend(!0, window.position(), {
                    top: window.position.y,
                    left: window.position.x,
                    lastX: window.position.lastX,
                    lastY: window.position.lastY,
                    originX: window.position.originX,
                    originY: window.position.originY
                }) : $.fn.originalPosition.apply(this, arguments)
            }
        }
    })(jQuery);
}

jsFiddle

like image 527
SpYk3HH Avatar asked Apr 25 '12 22:04

SpYk3HH


People also ask

What is the difference between window and document object?

The document object is your html, aspx, php, or other document that will be loaded into the browser. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc.

Which method Cannot be used with window object in JavaScript?

Explanation: There are two navigator object methods namely taintEnabled() and javaEnabled(). taintEnabled() the ability of the browser of data tainting. This method can't be used in JavaScript 1.2 version.

What is $( window?

Definition of jQuery window. jQuery window object represents an open window in the browser. The window object is automatically created by the browser. Suppose our documents contain multiple frames, then the browser creates one window object for the HTML document and creates additional window objects for each frame.


1 Answers

Properties assigned to the window object are the same as global variables. So your code:

if (!window.position) {
    window.position = function() {
        return navigator.appName.toLowerCase().indexOf("explorer") >= 0 ? { x: window.screenLeft, y: window.screenTop } : { x: window.screenX, y: window.screenY };
    };
};

is the same as:

if (typeof position == "undefined") {
    var position = function () {
        return navigator.appName.toLowerCase().indexOf("explorer") >= 0 ? { x: window.screenLeft, y: window.screenTop } : { x: window.screenX, y: window.screenY };
    };
};    

In no cases will changes to globals or the window property persist to another page, window or frame as they each have their own state from scratch.


To deal with your issue, you could make a function that takes the desired window as an argument:

function getWindowPosition(obj) {
    return navigator.appName.toLowerCase().indexOf("explorer") >= 0 ? { x: obj.screenLeft, y: obj.screenTop } : { x: obj.screenX, y: obj.screenY };
}

In the context of your new window, you could use it like this:

var bob = window.open(...);
var pos = getWindowPosition(bob);

This cross-window access would be subject to the same-origin security restrictions, but as long as they are the same origin, this would work.

like image 163
jfriend00 Avatar answered Sep 18 '22 02:09

jfriend00