Как получить доступ к родительскому Iframe из JavaScript

Question

Ну, у меня есть IFrame, который вызывает ту же страницу домена. Моя проблема в том, что я хочу получить доступ к некоторой информации из этого родительского Iframe с этой вызываемой страницы (из JavaScript). Как я могу получить доступ к этому Iframe?

Подробности: есть несколько таких же фреймов, которые могут загружать одну и ту же страницу, потому что я программирую среду Windows. Я намерен закрыть этот Ифраме, поэтому мне нужно знать, что мне следует закрыть из него. У меня есть массив, содержащий ссылки на эти Iframes.

РЕДАКТИРОВАТЬ: Там iframes генерируются динамически

Answer 1

Также вы можете установить одинаковые значения для имени и идентификатора

<iframe id="frame1" name="frame1" src="any.html"></iframe>

, чтобы вы могли использовать следующий код на дочерней странице

parent.document.getElementById(window.name);

Answer 2

Просто позвоните window.frameElement со страницы в рамке. Если страница не во фрейме, то frameElement будет null.

Другой способ (получить элемент окна внутри фрейма менее тривиально), но для полноты:

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

Answer 3

Я бы рекомендовал использовать postMessage API .

В вашем фрейме звоните:

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

На странице, в которую вы добавляете iframe, вы можете прослушивать подобные события:

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

Кстати, также можно делать вызовы в другие окна, а не только в фреймы.

Подробнее об API postMessage в блоге Джона Ресигса здесь

Answer 4

Старый вопрос, но у меня была такая же проблема, и я нашел способ получить iframe. Это просто вопрос перебора массива frames [] родительского окна и проверки содержимого контекста каждого фрейма в сравнении с окном, в котором выполняется ваш код. Пример:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

Или, используя jQuery:

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

Этот метод сохраняет назначение идентификатора для каждого iframe, что хорошо в вашем случае, поскольку они создаются динамически. Я не смог найти более прямой путь, поскольку вы не можете получить элемент iframe с помощью window.parent - он идет прямо к родительскому элементу окна (пропуская iframe). Так что циклический просмотр их кажется единственным способом, если только вы не хотите использовать идентификаторы.

Answer 5

вы можете использовать parent для доступа к родительской странице. Таким образом, для доступа к функции это будет:

var obj = parent.getElementById('foo');

Answer 6

После установки идентификатора iframe вы можете получить доступ к iframe из внутреннего документа, как показано ниже.

var iframe = parent.document.getElementById(frameElement.id);

Хорошо работает в IE, Chrome и FF.

Answer 7

Может быть, просто использовать

window.parent

в ваш фрейм, чтобы получить вызывающий фрейм / окна. Если у вас было несколько фреймов вызова, вы можете использовать

window.top

Answer 8

Попробуйте, в родительском кадре настройте свои КАДРЫ, как это:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

Обратите внимание, что идентификатор каждого фрейма передается в качестве источника в src.

тогда в вашем внутреннем html вы можете получить доступ к идентификатору кадра, в который он загружен, через location.hash:

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

тогда вы можете получить доступ к parent.document.getElementById () для доступа к тегу iframe изнутри iframe

Answer 9

// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}