What is the difference between window, window.top and window.parent?

Asked
Active3 hr before
Viewed126 times

6 Answers

windowdifference
90%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español,Stack Overflow на русском

load more v
88%

Returns a reference to the topmost window in the window hierarchy., Where the window.parent property returns the immediate parent of the current window, window.top returns the topmost window in the hierarchy of window objects. , This property is especially useful when you are dealing with a window that is in a subframe of a parent or parents, and you want to get to the top-level frameset. ,Report a problem with this content on GitHub

var topWindow = window.top;
72%

I just noticed that top, window and parent variables are giving me the same value. I was testing this at gmail inbox page. Does anybody know what is the difference between these three values?,If you're not within any frame, these will all just be a reference to the current window. If you're only within one level of frame, parent and top will both be a reference to the same thing.,window refers to the current frame.,parent refers to the parent of the current frame.

I just noticed that top, window and parent variables are giving me the same value. I was testing this at gmail inbox page. Does anybody know what is the difference between these three values?

top

I just noticed that top, window and parent variables are giving me the same value. I was testing this at gmail inbox page. Does anybody know what is the difference between these three values?

window

I just noticed that top, window and parent variables are giving me the same value. I was testing this at gmail inbox page. Does anybody know what is the difference between these three values?

parent
load more v
65%

I just noticed that top, window and parent variables are giving me the same value. I was testing this at gmail inbox page. Does anybody know what is the difference between these three values?,If you're not within any frame, these will all just be a reference to the current window. If you're only within one level of frame, parent and top will both be a reference to the same thing.,window refers to the current frame.,According to this link:

This code will work:

function Shape(x, y, w, h, fill) {
   this.x = x;
   this.y = y;
   this.w = w;
   this.h = h;
   this.fill = fill;
}

// get canvas element.
var elem = document.getElementById('myCanvas');

// check if context exist
if (elem.getContext) {

   var myRect = [];

   myRect.push(new Shape(10, 0, 25, 25, "#333"));
   myRect.push(new Shape(0, 40, 39, 25, "#333"));
   myRect.push(new Shape(0, 80, 100, 25, "#333"));

   context = elem.getContext('2d');
   for (var i in myRect) {
      oRec = myRect[i];
      context.fillStyle = oRec.fill;
      context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);

   }

}
load more v
75%

The following are the recommended approaches:,Usage of window.parent or variations of the parent hierarchy (for example,window.parent.parent) can cause the same symptoms.,Any usage of window.top should be avoided, if possible. The following are examples of commonly seen patterns.,Avoid usage of the window.top object altogether.

function isTopAccessible() {
   try {
      window.top.location;
      return true;
   } catch (err) {
      return false;
   }
}

var canAccess = isTopAccessible();
alert(canAccess);
load more v
40%

The “Same Origin” (same site) policy limits access of windows and frames to each other.,window.top – the reference to the topmost parent window.,source – the reference to the sender window.,window.parent – the reference to the “parent” (outer) window.

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>
load more v

Other "window-difference" queries related to "What is the difference between window, window.top and window.parent?"