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

Question

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

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

EDIT: Там плавающие фреймы генерируются динамически

Answer 1

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

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

Answer 2

Попробуйте это в вашем родительском фрейме настройки вы IFrames, как это:

<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 тега внутри фрейма

Answer 3

Также вы можете задать имя и идентификатор равных значений

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

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

parent.document.getElementById(window.name); 

Answer 4

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

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 с помощью window.parent - он идет прямо к элементу родительского окна (пропуская iframe). Таким образом, цикл через них кажется единственным способом, если вы не хотите использовать идентификаторы.

Answer 5

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

window.parent 

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

window.top 

Answer 6

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

Answer 7

Просто позвоните 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 8

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

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

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

Answer 9

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

В вашем IFRAME, звоните:

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); 

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

Подробнее о PostMessage API на Джона Resigs блоге here