Отправляем из iframe на родительскую страницу javascript

"Отправить из iframe js". "Отправляем из iframe на родительскую страницу javascript ". Для одного из проектов мне потребовалась "Отправить из iframe" на родительскую страницу.

Давайте разберемся... как отправляются данные из iframe с помощью javascript!

Посылаем данные из iframe js

1. Отправляем из iframe js при загрузке страницы.
2. Отправляем из iframe js при загрузке страницы #2.
3. Отправляем из iframe js при нажатии на кнопку.
4. Отправляем свои данные из iframe js при нажатии на кнопку.

Отправляем из iframe js при загрузке страницы.

Для того, чтобы отправить из iframe на родительскую страницу вам потребуется:

Страница №1.

Код простой страницы...

Далее на странице родителя используем window.onmessage +

function.

С выводом полученных данных "event.data" через alert .

window.onmessage = function(event) {

alert( event.data );

};

Страница №2.

Далее на странице используем тег iframe.

В src помещаем страницу №2(название возьму такое же, только расширение... ну... давайте используем "php"):

example_send_from_iframe.php

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

window.top.postMessage( 'что-то отправляем из iframe файл = example_send_from_iframe.php' , '*');

Соберем весь код отправки из iframe js при загрузке страницы.

Скачать готовый код с двумя страницами и описанной теорией можно здесь.

Что в архиве?

Пример работы кода отправки из iframe js при загрузке страницы.

Пример работы кода отправки из iframe js при загрузке страницы расположим на отдельном примере:

Проверь сам

Что в архиве отправки из iframe js при загрузке страницы.

Данный пример.



Отправляем из iframe js при загрузке страницы #2.

Для того, чтобы использовать второй способ "отправки из iframe js при загрузке страницы" вам потребуется...

Используем код и пример из выше приведенного пункта! Но вместо "window.onmessage" используем addEventListener.

window.addEventListener('message', function(e) {

alert('Сообщение из iframe : ' + e.data);

});

Страница №1:

Он же пример №2 "отправляем из iframe js"!

example_send_from_iframe_1.html Страница №1:

Страница, которая загружается в выше приведенную ссылку(страницу) "отправки из iframe javascript ".

example_send_from_iframe_1.php

Соберем весь код отправки из iframe js при загрузке страницы.

Скачать готовый код с двумя страницами и описанной теорией можно здесь.

Что в архиве №2?

Что в архиве "отправка из iframe javascript"

В архиве вот этот пример, который вы могли уже видеть выше...

Проверь сам.



Отправляем из iframe js при нажатии на кнопку.

Для того, чтобы отправить из iframe js при нажатии на кнопку вам понадобится:

Предыдущая теория, примеры/код...

И просто добавим кнопку button.

В кнопку добавляем id.

<button id="send_post">Отправь из iframe!</button>

Любым из известных способов... обратиться к id .

send_post . onclick = function()

{

window.top.postMessage(' Отправляем из iframe', '*');

}

Соберем код отправления из iframe js при нажатии на кнопку.

Скачать готовый код с двумя страницами и описанной теорией можно здесь.

Что в архиве?

Вот этот пример, который собран по теории изложенной выше...

Проверь сам.



Отправляем свои данные из iframe js при нажатии на кнопку.

Как бы странно это не звучало, но...

Как я уже выше говорил... мне понадобилось отправлять из iframe в одном из проектов...

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

Я даже зарубился с технической поддержкой Яндекс Метрики... ну как вы знаете, если вы сталкивались, они почему-то считают, что они умнее вас...

Не буду рассказывать - это отдельная история...

Поэтому... далее будем получать только свои данные...

Получаем только свои данные из iframe js.

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

В момент отправки сообщения из iframe... добавим некую постоянную консттанту, которая никогда не изменится!

И которая будет уникальная всегда...

Любой набор цифр букв и тд...

Например: ||**||**MY_SEnD

В момент отправки вы добавляете этот кусок строки... в ваше сообщение из iframe ... например вот так:

0

А на родительской странице нужно этот "ИД" отловить... например во так:

window.addEventListener('message', function(e)

{

if(e.data .includes('||**||**MY_SEnD'))

{

alert( e.data . replace('||**||**MY_SEnD', ''));

}

});

Пример отправить свои данные из iframe js при нажатии на кнопку.

Пример :

здесь

Скачать отправить свои данные из iframe js при нажатии на кнопку.

Скачать готовый код с двумя страницами и описанной теорией можно здесь.

Что в архиве?

В архиве выше приведенный пример!