Вызов кода JavaScript в iframe с родительской страницы

У Quirksmode был опубликовать на этом.

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

IFrames

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

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

Рамка или объект?

Фундаментальный вопрос заключается в том, рассматривается ли iframe как фрейм или как объект.

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

Атрибут NAME

Самое важное правило - дать любому 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.

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

Доступ к iframe

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

frames['testiframe'].location.href

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

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

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

Созданные фреймы

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

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

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

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

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

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

Когда вы изменяете размер текста через меню «Вид», размеры текста в окнах iframe изменяются правильно. Однако этот браузер не изменяет разрывы строк в исходном тексте, так что часть текста может стать невидимой или могут возникать разрывы строк, когда в строке все еще может содержаться другое слово.

Предположим, что идентификатор вашего iFrame - targetFrame, а функция, которую вы хотите вызвать, - targetFunction():

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

Вы также можете получить доступ к фрейму, используя window.frames вместо document.getElementById.

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

IFRAME должен быть в коллекции frames[]. Используйте что-нибудь вроде

frames['iframeid'].method();

В IFRAME сделайте вашу функцию общедоступной для объекта окна:

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

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

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

Здесь есть некоторые особенности, о которых следует знать.

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

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

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

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

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

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

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

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

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

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

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

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

Любой способ обхода этого ограничения был бы крайне небезопасным.

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

То же самое, но немного проще - Как обновить родительскую страницу со страницы в iframe. Просто вызовите функцию родительской страницы, чтобы вызвать функцию javascript для перезагрузки страницы:

window.location.reload();

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

window.parent.location.reload();

Оба работают.

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

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

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

if (el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if (el.contentDocument)
{
   el.contentDocument.targetFunction();
}

Работал как шарм :)

Если цель iFrame и содержащий документ находятся в другом домене, ранее опубликованные методы могут не работать, но есть решение:

Например, если документ A содержит элемент iframe, который содержит документ B, а сценарий в документе A вызывает postMessage () для объекта Window документа B, то событие сообщения будет запущено для этого объекта, помеченного как происходящее из Window of документ A. Сценарий в документе 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

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

Вы должны попытаться использовать объект window и вызвать родительскую функцию:

window.parent.targetFunction();

Попробуй просто parent.myfunction()

После ответа Nitin Bansal

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

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

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...

Я нашел довольно изящное решение.

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

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

Пример:

О родителе:

function tunnel(fn) {
    fn();
}

В iframe:

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

parent.tunnel(myFunction);

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

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

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

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

Некоторые из этих ответов не затрагивают проблему CORS или не делают очевидным, где вы размещаете фрагменты кода, чтобы сделать общение возможным.

Вот конкретный пример. Скажем, я хочу нажать кнопку на родительской странице и сделать что-то внутри iframe. Вот как бы я это сделал.

parent_frame.html

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if (event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

Чтобы пойти в другом направлении (нажмите кнопку внутри iframe, чтобы вызвать метод вне iframe), просто переключитесь, где находится фрагмент кода, и измените это:

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

к этому:

window.parent.postMessage('foo','*')