Передать значение в iframe из окна - PullRequest
Новая
       26

Передать значение в iframe из окна

47 голосов
/ 11 февраля 2009

Мне нужно отправить значение в iframe.

iframe присутствует в текущем окне. Как мне этого добиться?

Мне нужно сделать это с помощью javascript в родительском окне, которое содержит iframe.

Ответы [ 7 ]

62 голосов
/ 11 февраля 2009

Во-первых, вы должны понимать, что у вас есть два документа: фрейм и контейнер (который содержит фрейм).

Основным препятствием при манипулировании рамой из контейнера является то, что рама загружается асинхронно. Вы не можете просто получить к нему доступ в любое время, вы должны знать, когда он закончил загрузку. Так что тебе нужен трюк. Обычное решение - использовать window.parent во фрейме, чтобы «подняться» (в документ, содержащий тег iframe).

Теперь вы можете вызывать любой метод в документе контейнера. Этот метод может манипулировать фреймом (например, вызвать некоторый JavaScript в фрейме с необходимыми параметрами). Чтобы узнать, когда вызывать метод, у вас есть две опции:

  1. Вызовите его из body.onload кадра.

  2. Поместите элемент script в качестве последнего элемента в HTML-содержимое фрейма, где вы вызываете метод контейнера (оставлено в качестве упражнения для читателя).

Итак, рамка выглядит так: 

<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>

А контейнер вот так: 

<script>
function setUpFrame() { 
    var frame = window.frames['frame-id'];
    frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>
48 голосов
/ 11 февраля 2009

Зависит от вашей конкретной ситуации, но если iframe может быть развернут после остальной части загрузки страницы, вы можете просто использовать строку запроса, например: 

<iframe src="some_page.html?somedata=5&more=bacon"></iframe>

А потом где-нибудь в some_page.html: 

<script>
var params = location.href.split('?')[1].split('&');
data = {};
for (x in params)
 {
data[params[x].split('=')[0]] = params[x].split('=')[1];
 }
</script>
29 голосов
/ 11 января 2017

Вот еще одно решение, которое можно использовать, если кадры из разных доменов. 

var frame = /*the iframe DOM object*/;
frame.contentWindow.postMessage({call:'sendValue', value: /*value*/}, /*frame domain url or '*'*/);

А в самой рамке: 

window.addEventListener('message', function(event) {
    var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
    if (origin !== /*the container's domain url*/)
        return;
    if (typeof event.data == 'object' && event.data.call=='sendValue') {
        // Do something with event.data.value;
    }
}, false);

Не знаю, какие браузеры поддерживают это.

13 голосов
/ 11 февраля 2009

Используйте коллекцию кадров .

Из ссылки: 

var frames = window.frames; // or // var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) { 
  // do something with each subframe as frames[i]
  frames[i].document.body.style.background = "red";
}

Если у iframe есть имя, вы также можете сделать следующее: 

window.frames['ponies'].number_of_ponies = 7;

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

11 голосов
/ 11 декабря 2013

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

Использование идентификатора фрагмента URL (#)

В контейнере: 

<iframe name="frame-id" src="http://url_to_iframe#dataToFrame"></iframe>

В кадре: 

<script>
var dataFromDocument = location.hash.replace(/#/, "");
alert(dataFromDocument); //alerts "dataToFrame"
</script>

Используйте имя iFrame

(мне не нравится это решение - оно злоупотребляет атрибутом name, но это вариант, поэтому я упоминаю его для записи)

В контейнере: 

<iframe name="dataToFrame" src="http://url_to_iframe"></iframe>

В кадре: 

<script type="text/javascript">
alert(window.name); // alerts "dataToFrame"
</script>
0 голосов
/ 02 апреля 2019

Мы можем использовать концепцию "postMessage" для отправки данных в основной iframe из главного окна.

вы можете узнать больше о postMessage по этой ссылке добавьте приведенный ниже код в главное окно страницы 

// main window code
window.frames['myFrame'].contentWindow.postMessage("Hello World!");

мы пройдем "Привет, мир!" сообщение в iframe contentWindow с iframe id = "myFrame".

теперь добавьте приведенный ниже код в исходный код iframe 

// iframe document code
function receive(event) {
    console.log("Received Message : " + event.data);
}
window.addEventListener('message', receive);

на веб-странице iframe мы прикрепим прослушиватель событий к полученному событию, а при обратном вызове 'receive' мы выведем данные на консоль

0 голосов
/ 11 февраля 2009

Взгляните на ссылку ниже, которая показывает, что возможно изменить содержимое iFrame на вашей странице с помощью Javascript, хотя вы, скорее всего, столкнетесь с несколькими кросс-браузерными проблемами. Если вы можете сделать это, вы можете использовать javascript на своей странице, чтобы добавить скрытые элементы dom в iFrame, содержащий ваши значения, которые iFrame может читать. Доступ к документу внутри iFrame

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...