Jak uzyskać dostęp do nadrzędnego elementu iframe z JavaScript

Cóż, mam ramkę iFrame, która wywołuje tę samą stronę domeny. Mój problem polega na tym, że chcę uzyskać dostęp do niektórych informacji z tego nadrzędnego elementu iframe z tej wywoływanej strony (z JavaScript). Jak mogę uzyskać dostęp do tego elementu iframe?

Szczegóły: Istnieje kilka ramek iframe takich jak ta, które mogą mieć załadowaną tę samą stronę, ponieważ programuję środowisko Windows. Zamierzam zamknąć ten iframe, dlatego muszę wiedzieć, który powinienem zamknąć od wewnątrz. Mam tablicę zawierającą odniesienia do tych ramek iframe.

EDYCJA: Tam iframe są generowane dynamicznie

Możesz także ustawić nazwę i identyfikator na równe wartości

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

więc będziesz mógł użyć kolejnego kodu wewnątrz strony podrzędnej

parent.document.getElementById(window.name);

Po prostu zadzwoń window.frameElementze swojej strony w ramce. Jeśli strona nie jest w ramce, frameElementbędzie null.

W drugą stronę (umieszczenie elementu okna wewnątrz ramy jest mniej trywialne), ale ze względu na kompletność:

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

Polecam korzystanie z postMessage API .

W swoim iframe zadzwoń:

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

Na stronie, którą dołączasz element iframe, możesz nasłuchiwać takich zdarzeń:

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

    }, false);

Nawiasem mówiąc, możliwe jest również wywoływanie innych okien, a nie tylko ramek iframe.

Przeczytaj więcej o API postMessage na blogu Johna Resigs'a tutaj

Stare pytanie, ale miałem ten sam problem i znalazłem sposób na uzyskanie ramki iframe. Jest to po prostu kwestia iteracji przez tablicę frames [] okna nadrzędnego i przetestowania contentWindow każdej ramki z oknem, w którym działa twój kod. Przykład:

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

Lub używając jQuery:

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

Ta metoda oszczędza przypisywanie identyfikatora do każdego elementu iframe, co jest dobre w twoim przypadku, ponieważ są tworzone dynamicznie. Nie mogłem znaleźć bardziej bezpośredniego sposobu, ponieważ nie możesz pobrać elementu iframe za pomocą window.parent - przechodzi bezpośrednio do nadrzędnego elementu okna (pomijając iframe). Dlatego ich przeglądanie wydaje się jedynym sposobem, chyba że chcesz użyć identyfikatorów.

możesz użyć, parentaby uzyskać dostęp do strony nadrzędnej. Aby uzyskać dostęp do funkcji, byłoby to:

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

Po ustawieniu id elementu iframe możesz uzyskać dostęp do elementu iframe z dokumentu wewnętrznego, jak pokazano poniżej.

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

Działa dobrze w IE, Chrome i FF.

Może po prostu użyj

window.parent

do elementu iframe, aby uzyskać wywołującą ramkę / okna. Jeśli masz wiele ramek wywołujących, możesz użyć

window.top

Spróbuj tego, w swojej ramce nadrzędnej skonfiguruj swoje IFRAME'y w ten sposób:

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

Zauważ, że identyfikator każdej ramki jest przekazywany jako kotwica w src.

następnie w swoim wewnętrznym html możesz uzyskać dostęp do identyfikatora ramki, w której jest ładowana, poprzez location.hash:

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

wtedy możesz uzyskać dostęp do parent.document.getElementById (), aby uzyskać dostęp do tagu iframe z wnętrza elementu 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;
}