2010-11-04 7 views
4

Я пытаюсь сделать что-то с jquery.jquery access iframe id из содержимого iframe

У меня есть код, подобный этому 1.html;

<html> 
<head> 
<script language="javascript" type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
<iframe src="2.html" id="frame1"></iframe> 
<iframe src="3.html" id="frame2"></iframe> 
</body> 
</html> 

в 2.html файле. Я пытаюсь получить доступ к id контейнера iframe. Содержимое файла 2.html;

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#btnIdKim').click(function(){ 
    }); 

}); 
</script> 
</head> 
<body> 
<input type="button" name="btnIdKim" id="btnIdKim" value="Id Kim" /> 
</body> 
</html> 

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

но я не знаю как.

Спасибо за все, кто заинтересован в

ответ

8

Там являются HTML5 (первоначально IE расширение) свойства frameElement на window:.

alert(frameElement.id); 

Но это не глобально поддерживается; вы не получите его в Google Chrome (на момент написания статьи, версии 7) или в более старых версиях других популярных браузеров, отличных от IE.

Без этого расширения вы должны сделать это вручную. Перейти к родительскому окну, и поиск через все фреймов, чтобы увидеть, если документ, содержащийся в ваш собственный документ:

function getFrameElement() { 
    var iframes= parent.document.getElementsByTagName('iframe'); 
    for (var i= iframes.length; i-->0;) { 
     var iframe= iframes[i]; 
     try { 
      var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document; 
     } catch (e) { 
      continue; 
     } 
     if (idoc===document) 
      return iframe; 
    } 
    return null; 
} 

alert(getFrameElement().id); 

(contentDocument обходной путь необходим, потому что IE < 8 не поддерживает его, а try...catch является необходимо избегать исключений безопасности, останавливающих цикл, когда он соответствует кадру из другого домена.)

2

Базовая функция поиска jQuery займет область в качестве второго параметра. По умолчанию используется текущий документ, но вы можете указать другой документ для поиска по границам iframe. Я сделал это для предыдущего проекта; это может быть не совсем то, что вы ищете, но, надеюсь, содержит некоторые подсказки.

С в плавающем фрейме вы можете получить доступ к документу в верхнем окне, как это:

$('#iframe2', top.document) 

Это звучит, как вы хотите, чтобы определить, в каком IFrame имели место события щелчка, не так ли? Я не знаю точно, как это сделать, так как у меня был только один

Для бонусной удовольствия, вот мой обработчик событий для изменения размера элемента Iframe в родительском документ на основе размера Iframe документа:

$(document).bind('ResultsFrameSizeChanged:hybernaut', function(event){ 
    var iframe = $('#results', top.document)[0]; 

    if(iframe.contentDocument){ // IE 
     var height = iframe.contentDocument.body.offsetHeight + 35; 
    } else { 
     var height = iframe.contentWindow.document.body.scrollHeight; 
    } 

    // konsole.log("Setting iframe height to " + height); 
    $(iframe).css('height', height); 

    }); 

Вы затем вызвать, что пользовательское событие на события, которые могут изменить высоту документа (например, АЯКС загрузка):

$(top.document).trigger('ResultsFrameSizeChanged:hybernaut'); 

Сначала я был обязательным, что событие $ («IFrame») готов(). но это было непоследовательно в браузерах, и я оказался триггером g из нескольких мест в обработчиках завершения ajax.

Еще одно важное замечание: если вы загружаете jQuery в свои фреймы, у вас есть несколько отдельных экземпляров jQuery, и многие из ваших предположений о том, как работает jQuery, больше не верны (что сейчас глобально?). Это может быть очень сложно.Я не уверен, но я считаю, что если вы используете события с именами и запускаете их на конкретном документе (т. Е. Top.document), тогда они будут обрабатываться в правильном контексте.

+0

Как вы обходились * Небезопасная попытка JavaScript получить доступ к фрейму с URL-адресом ... Домены, протоколы и порты должны соответствовать *? – Josh

Смежные вопросы