• Вызов кода JavaScript в iframe из родительского стр.

    В основном, я есть iframe, внедренные в страницы и iframe есть некоторые JavaScript на процедуры мне нужно вызвать из родительской страницы.

    Теперь наоборот очень прост: вам нужно только позвонить parent.functionName(), но к сожалению мне нужно ровно наоборот.

    Обратите внимание, что мои проблемы-это не изменение исходного адреса URL в iframe, но вызов функции, определенной в iframe.

  • Ответы

  • Предположим ваш iframe с идентификатором "targetFrame" и функцию, которую вы хотите вызвать это targetFunction():

    document.getElementById('targetFrame').contentWindow.targetFunction(); 

    Вы также можете открыть рамку с помощью window.frames вместо document.getElementById.

    window.frames[0].frameElement.contentWindow.targetFunction(); 

    Есть некоторые причуды, чтобы быть в курсе здесь.

    1. HTMLIFrameElement.contentWindow вероятно, более простой способ, но это не совсем обычное свойство и некоторые браузеры не поддерживают его, в основном старые. Это объясняется тем, что dom уровня 1 стандарта HTML не имеет ничего сказать о window объект.

    2. Вы также можете попробовать HTMLIFrameElement.contentDocument.defaultView, который пару старых браузерах, но IE не позволяет. Даже так, стандарт не прямо говорят, что вы получаете window объект обратно, по той же причине, (1), но вы можете подобрать несколько дополнительных версий браузеров здесь, если вы заботитесь.

    3. window.frames['name'] обратно в окно-старейшее и, следовательно, наиболее надежный интерфейс. Но вы тогда должны использовать name="..." атрибут, чтобы иметь возможность получить кадр по имени, что немного некрасиво/устаревшие/переходные. (id="..." было бы лучше, но IE не нравится.)

    4. window.frames[number] тоже очень надежный, но зная правильный индекс-это трюк. Вы можете уйти с этой например. если вы знаете, что есть только один iframe на странице.

    5. Вполне возможно ребенок iframe, который еще не был загружен, или что-то еще пошло не так чтобы сделать его недоступным. Вы можете найти его легче обратного потока коммуникаций: то есть, у ребенка iframe и уведомить его window.parent сценарий, когда он закончил загружен и готов к перезвонили. Передав одному из своих собственных объектов (например. функции обратного вызова), чтобы родительский скрипт, что родитель может общаться напрямую со скриптом в iframe, не беспокоясь о том, что HTMLIFrameElement он связан.

    Вызов родителей в JS функцию из iframe можно, но только тогда, когда оба родителя и страницы, загруженной в iframe из того же домена, т. е. abc.com и оба используют один протокол, т. е. оба либо на http:// или https://.

    Вызов произойдет сбой в нижеперечисленных случаях:

    1. Родительской страницы и iframe на странице из другого домена.
    2. Они используют разные протоколы, один находится на http:// и других находится на https://.

    Любой обходной путь, чтобы это ограничение было бы крайне неуверенно.

    Например, представьте себе, я зарегистрировал домен superwinningcontest.com и разослал ссылки на чужие письма. Когда они нагрузили на главную страницу, я мог спрятать несколько iframeтам и прочитать их Facebook накормить, проверить последние Amazon или PayPal транзакции, или--если они используются службы, которые не обеспечивают соответствующую безопасность--переводить деньги из своих счетов. Вот почему JavaScript является ограниченным в тот же домен и протокол.

    В iframe сделать функцию общественности к объекту Window:

    window.myFunction = function(args) {    doStuff(); } 

    Для доступа от родительской страницы, используйте это:

    var iframe = document.getElementById("iframeId"); iframe.contentWindow.myFunction(args); 

    Элемент iframe должен быть в frames[] коллекция. Использовать что-то вроде

    frames['iframeid'].method(); 

    Если в iframe и содержания документа находится на другом домене, эти методы могут не работать, но есть решение:

    Например, если документ содержит элемент iframe, который содержит документ Б, А скрипт в документе a вызывает метод postmessage() объекта Window из документа B, то сообщение будет запущено событие на этом объекте, отмечен как происходящий из окна документа А. скрипта в документе a может выглядеть так:

    var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', 'http://b.example.org/'); 

    Чтобы зарегистрировать обработчик событий для входящих событий, сценарий будет использовать метод addeventlistener() (или аналогичные механизмы). Например, скрипт в документ B может выглядеть так:

    window.addEventListener('message', receiver, false); function receiver(e) {   if (e.origin == 'http://example.com') {     if (e.data == 'Hello world') {       e.source.postMessage('Hello', e.origin);     } else {       alert(e.data);     }   } } 

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

    через http://dev.w3.org/html5/postmsg/#web-messaging

    Просто для записи, я столкнулся с той же проблемой сегодня, но на этот раз страница была встроена в объект, а не элемент iframe (так как это было что XHTML 1.1 документа). Вот как это работает с объектами:

    document   .getElementById('targetFrame')   .contentDocument   .defaultView   .targetFunction(); 

    (извините за некрасивые разрывы строк, не поместился в одну строку)

    Продолжая JoelAnair в ответ:

    Для большей надежности, использовать следующим образом:

    var el = document.getElementById('targetFrame');  if(el.contentWindow) {    el.contentWindow.targetFunction(); } else if(el.contentDocument) {    el.contentDocument.targetFunction(); } 

    Работает как Шарм :)

    Же самое, но немного проще будет как обновить родительскую страницу от страницы в окне iframe. Просто позвоните родительской страницы функция для вызова функции JavaScript без перезагрузки страницы:

    window.location.reload(); 

    Или сделать это прямо со страницы в iframe:

    window.parent.location.reload(); 

    Обе работы.

    После Нитин Бансал ответ

    и для еще большей надежности:

    function getIframeWindow(iframe_object) {   var doc;    if (iframe_object.contentWindow) {     return iframe_object.contentWindow;   }    if (iframe_object.window) {     return iframe_object.window;   }     if (!doc && iframe_object.contentDocument) {     doc = iframe_object.contentDocument;   }     if (!doc && iframe_object.document) {     doc = iframe_object.document;   }    if (doc && doc.defaultView) {    return doc.defaultView;   }    if (doc && doc.parentWindow) {     return doc.parentWindow;   }    return undefined; } 

    и

    ... var el = document.getElementById('targetFrame');  getIframeWindow(el).targetFunction(); ... 

    Англ. был пост на эту.

    Поскольку страницы теперь сломана, и можно подняться только по archive.org я воспроизвел его здесь:

    Окна iframe

    На этой странице я даю краткий обзор доступа элементы iframe со страницы они. Не удивительно, есть некоторые соображения браузера.

    Iframe-это встроенный фрейм, фрейм, который, хотя и содержит совершенно отдельная страница с собственным URL-адресом, тем не менее, помещен внутри другого HTML-страницы. Это дает очень хорошие возможности в веб-дизайне. Проблема в том, чтобы открыть в iframe, например, чтобы загрузить новую страницу в ней. В этом разделе объясняется, как это сделать.

    Фрейм или объект?

    Основополагающий вопрос является ли элемент iframe рассматривается как рамка или как объект.

    • Как пояснил на введение в рамки страницы, если вы используете фреймы браузер создает фрейм иерархии для тебя (top.frames[1].frames[2] и такие). Не iframe, не вписываются в рамки этой иерархии?
    • Или делает браузер см. тег iframe как просто еще один объект, объект, который, случается, есть ФОК собственности? В этом случае мы должны использовать стандартный дом вызвать (как document.getElementById('theiframe')) для доступа к нему. В целом браузеры позволяют обе точки зрения на "реальный" (жестко) элементы iframe, но генерируемые элементы iframe не могут быть вызваны в качестве кадров.

    Имя атрибута

    Самое главное правило-это давать какие-либо iframe в создании name атрибут, даже если Вы также используете id.

    <iframe src="iframe_page1.html"     id="testiframe"     name="testiframe"></iframe> 

    Большинство браузеров нужны name атрибут, чтобы сделать элемент iframe части рамки иерархии. Некоторые браузеры (в частности в Mozilla) нужно id чтобы сделать элемент iframe доступен в виде объекта. Назначая обоих атрибутов в iframe вы держать свои варианты открытыми. Но name это гораздо важнее, чем id.

    Доступ

    Либо вы получаете доступ к iframe, потому что объект и изменить его src или вы получить доступ к iframe, потому что кадр и изменить его location.href.

    документ.метода getelementbyid('iframe_id').в src = 'newpage.html'; рамы['iframe_name'].местоположение.в href = 'newpage.html'; рамка синтаксис немного предпочтительнее, потому что в Opera 6 поддерживает его, но не объект синтаксиса.

    Доступ в iframe

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

    frames['testiframe'].location.href 

    синтаксис. Насколько я знаю, это всегда работает.

    Доступа к документу,

    Обращения к документу в iframe довольно просто, при условии, что вы используйте name атрибут. Подсчитать Количество ссылок в документе в iframe делать frames['testiframe'].document.links.length.

    Сгенерированные элементы iframe

    Когда вы создаете элемент iframe через W3C по dom в элемент iframe не сразу вошел в frames массив, хотя и frames['testiframe'].location.href синтаксис не будет работать сразу. Браузер нужно немного времени, прежде чем этот iframe оказывается в массиве, время в течение которого скрипт может выполняться.

    В document.getElementById('testiframe').src синтаксис работает отлично в любых обстоятельствах.

    В target атрибут ссылка не работает либо с генерируемые элементы iframe, за исключением оперы, хотя я дал мой сгенерированный элемент iframe как name и id.

    Отсутствие target поддержка означает, что вы должны использовать JavaScript для изменения содержимого созданный iframe, но так как вы в любом случае нужно JavaScript для его создания в первую очередь, я не вижу в этом большой проблемы.

    Размер текста в элементах iframe

    Любопытный Explorer 6 (только ошибка:

    При изменении размера текста с помощью меню вид, Размер текста в элементах iframe правильно поменяли. Тем не менее, этот браузер не меняется, разрывы строк в тексте оригинала, так, что части текста могут становиться невидимыми, или разрывы строк может возникнуть, пока линия еще могут продержаться еще одно слово.

           $("#myframe").load(function() {             alert("loaded");         }); 

    Если мы хотим вызвать родительской страницы функции JavaScript из iframe на который генерируется от кодирования. экс компонентом shadowbox или лайтбокс

    окна.родитель.targetFunction();

    Попробовать просто parent.myfunction()

    Я нашел довольно элегантное решение.

    Как вы сказали, это довольно легко выполнить код, расположенный на родительский документ. И вот на базе моего кода, чтобы сделать прямо противоположное.

    Когда мой iframe загружает, я вызвать функцию, расположенную на родительский документ, передав в качестве аргумента ссылку на локальную функцию, расположенном в iframe документ. Родительский документ теперь имеет прямой доступ в iframe функция через эту ссылку.

    Пример:

    На родителя:

    function tunnel(fn) {     fn(); } 

    На iframe:

    var myFunction = function() {     alert("This work!"); }  parent.tunnel(myFunction); 

    Когда iframe загружает, она вызовет родителей.туннель(YourFunctionReference), который будет выполнять функции, полученной в параметре.

    Так просто, без необходимости иметь дело с все номера-стандарты методов из различных браузерах.

    Используйте следующую функцию для вызова фрейма в родительском разделе

    parent.document.getElementById('frameid').contentWindow.somefunction()