Кроссдоменный iframe

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

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

window.postMessage

Допустим вам нужно передать какое-то сообщение c вашего сервера через iframe той странице на которой этот iframe открыт. Как это сделать? Да легко, выполняем js скрипт:  

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

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

Чтобы передать несколько данных, можно использовать массив:

var sendObject = {
title: 'resize',
value: height_change,
idn: idn
};
parent.window.postMessage(sendObject, '*')

Этот код передает информацию о необходимой высоте блока iframe и идентификатор iframe, если их много на странице.

window.onmessage

Теперь на клиентском компьютере мы должны отловить это сообщение и идентифицировать его. Это делается так:

function listener(event) {
  if (event.data == 'add_pay') {
    alert( "получено: " + event.data );
  }
}

if (window.addEventListener) {
  window.addEventListener("message", listener);
} else {
// IE8
  window.attachEvent("onmessage", listener);
}

Так мы получаем сообщение о каком-то событии, и дальше передаем его, например Яндекс Метрике.

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

function listener(event) {
  if (event.data.title == 'resize') {
    jQuery("#"+event.data.idn).css('height', event.data.value);
  }
}

if (window.addEventListener) {
  window.addEventListener("message", listener);
} else {
// IE8
  window.attachEvent("onmessage", listener);
}

Ну и меняем высоту блока до нужного размера. Тут использован Jquery, но это кому как удобнее.

Этот метод работает на всех современных браузерах, начиная с IE8. Можно использовать и на одном сайте, для обмена между страницами. В общем спектр применения очень широк. Можно, например сделать онлайн чат или что-то подобное.

Если возникли вопросы или уточнения, пишите в комментарии. Буду только рад.