Як отримати доступ до батьківського iframe з JavaScript

Ну, у мене є IFrame, який називає ту саму сторінку домену. Моя проблема полягає в тому, що я хочу отримати доступ до деякої інформації з цього батьківського iframe з цієї названої сторінки (з JavaScript). Як я можу отримати доступ до цього iframe?

Докладніше: Є кілька таких кадрів, як цей, які можуть завантажувати ту саму сторінку, оскільки я програмую середовище Windows. Я маю намір закрити цей Іфрейм, тому мені потрібно знати, що мені слід закрити всередині нього. У мене є масив, що зберігає посилання на ці рамки.

РЕДАКТУВАННЯ: Там кадрів генеруються динамічно

Також ви можете встановити ім'я та ідентифікатор на рівні значення

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

тож ви зможете використовувати наступний код всередині дочірньої сторінки

parent.document.getElementById(window.name);

Просто зателефонуйте 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;
}

Я рекомендую використовувати API postMessage .

У своєму кадрі iframe зателефонуйте:

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

На сторінці, на якій ви включаєте кадр, ви можете слухати такі події:

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

    }, false);

До речі, також можна здійснювати дзвінки в інші вікна, і не тільки в рамки кадрів.

Детальніше про API PostMessage читайте на блозі Джона Ресігса тут

Старе запитання, але у мене було саме це питання і я знайшов спосіб отримати кадр iframe. Це просто питання ітерації через масив батьківського вікна [] та тестування вмісту кожного вікна кадру проти вікна, в якому працює ваш код. Приклад:

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). Тож прокручування через них здається єдиним способом, якщо ви не хочете використовувати ідентифікатори.

ви можете використовувати parentдля доступу до батьківської сторінки. Отже, для доступу до функції було б:

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

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

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

Добре працює в IE, Chrome та FF.

Може просто використовувати

window.parent

у ваш iframe, щоб отримати кадр / вікна виклику. Якщо у вас було кілька кадрів виклику, ви можете використовувати

window.top

Спробуйте це, у своєму батьківському кадрі налаштуйте такі IFRAME:

<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

// 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;
}