Объект окна Javascript

Question

В Javascript, скажем, у нас есть главная страница (main.html), которая содержит <iframe> (iframe.html)

Теперь внутри этого iframe.html, если нам нужно обратиться к чему-то на главной странице (main.html) мы можем не просто указать window вместо parent.window

Если ответом является то, что нам нужно написать parent.window, я хотел бы понять, нет ли единой window ссылки на объект для всех iframes на главной странице ..

Хотя я понимаю, что document относится к отдельным фреймам, но window должен быть общим для всех .. Не так ли ... Пожалуйста, помогите мне понять концепцию ...

Также есть что-то еще window.parent? Если да, то чем он отличается от parent.window?

Answer 1

iframe s (и frame s) являются их собственными окнами, хотя в случае iframe s они выглядят так, как будто они являются частью основного окна документа. Так что да, чтобы обратиться к окну основного документа, они будут использовать parent (или window.parent, если вы хотите быть многословным, но ясным), потому что они являются отдельными объектами. Это частично необходимо, потому что многие вещи в document заканчиваются как свойства на содержащем window.

Если подумать, это имеет смысл: цель iframe состоит в том, чтобы встраивать контент из независимых источников в страницу. Если бы главная страница и iframe (s) на ней совместно использовали один window объект, они имели бы общий контекст и, возможно, конфликтовали друг с другом.

безвозмездно живой пример :

Родительский HTML:

<p>I'm the parent window</p>
<iframe width="500" height="500" src="http://jsbin.com/iyogir"></iframe>

Родительский JavaScript:

function foo() {
  display("<code>foo</code> called!");
}
function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}

Детский HTML:

<p>I'm in the frame</p>
<input type='button' id='theButton' value='Click Me'>

Детский JavaScript:

window.onload = function() {

  document.getElementById('theButton').onclick = function() {
    var p = window.parent;
    if (!p) {
      display("Can't find parent window");
    }
    else if (typeof p.foo !== "function") {
      display("Found parent window, but can't find <code>foo</code> function on it");
    }
    else {
      display("Calling parent window's <code>foo</code> function.");
      p.foo();
    }
  };

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

};

Answer 2

Концепция window связана с document: есть один window на document и один document на window.

Это означает, что <iframe> элементы, которые имеют свои document, также имеют свои window, как всплывающее окно или главное окно навигатора.

Итак, вам действительно придется использовать window.parent для доступа к контейнеру элемента <iframe>, так же, как вы должны использовать window.opener для доступа к владельцу всплывающего окна.

РЕДАКТИРОВАТЬ: Оба window.parent и parent.window являются допустимыми выражениями, которые возвращают один и тот же объект. Это связано с тем, что объект window является контекстом по умолчанию в сценариях (неквалифицированные имена анализируются как элементы window), а объекты window имеют свойство window, которое ссылается на себя.

Итак, parent.window оценивается как window.parent.window, то есть тот же объект, что и window.parent.

Тем не менее, я предпочитаю использовать window.parent, чтобы избежать (минимальных) накладных расходов, связанных с доступом к дополнительному свойству.