jquery доступ к идентификатору iframe из содержимого iframe - PullRequest
Новая
       13

jquery доступ к идентификатору iframe из содержимого iframe

4 голосов
/ 04 ноября 2010

Я пытаюсь что-то сделать с помощью jquery.

У меня есть такой код 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 файле. я пытаюсь получить доступ к идентификатору контейнера 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, который содержит кнопка.

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

Спасибо всем, кто интересуется.

Ответы [ 2 ]

8 голосов
/ 04 ноября 2010

Существует свойство 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 не поддерживает его; <code>try...catch необходим, чтобы избежать исключений безопасности при остановке цикла, когда он встречает кадр из другого домена.)

2 голосов
/ 04 ноября 2010

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

Внутри iframe вы можете получить доступ к документу верхнего окна следующим образом: 

$('#iframe2', top.document)

Похоже, вы хотите определить, в каком фрейме произошло событие click, верно? Я не уверен, как именно это сделать, так как у меня был только один

Для удовольствия, вот мой обработчик событий для изменения размера элемента 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);

  });

Затем вы запускаете это пользовательское событие для событий, которые могут изменить высоту документа (например, ajax-загрузка): 

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

Сначала я связывал это событие с $ ('iframe'). Ready (), но это было несовместимо во всех браузерах, и в итоге я вызвал его из нескольких мест в обработчиках завершения ajax.

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

...