Передача сообщений от iFrame через все браузеры - PullRequest
Новая
       14

Передача сообщений от iFrame через все браузеры

12 голосов
/ 20 сентября 2011

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

Другими словами, iframe должен передать сообщение своему родителю при нажатии кнопки.

После пробежки по океану «Нет, междоменная политика - это чушь», я обнаружил window.postMessage , часть черновой спецификации HTML5.

По сути, вы размещаете следующий JavaScript-код на своей странице для захвата сообщения из iframe: 

window.addEventListener('message', goToThing, false);

function goToThing(event) {
    //check the origin, to make sure it comes from a trusted source.
    if(event.origin !== 'http://localhost')
        return;

    //the event.data should be the id, a number.
    //if it is, got to the page, using the id.
    if(!isNaN(event.data))
        window.location.href = 'http://localhost/somepage/' + event.data;
}

Затем в iframe есть некоторый JavaScript, который отправляет сообщение родителю: 

$('form').submit(function(){
    parent.postMessage(someId, '*');
});

Отлично, верно? Единственная проблема в том, что он не работает ни в одной версии IE. Итак, мой вопрос заключается в следующем: учитывая, что мне нужно передать сообщение из iframe его родителю (оба из которых я контролирую), есть метод, который я могу использовать, который будет работать через любой (> IE6) браузер?

Ответы [ 3 ]

5 голосов
/ 01 июля 2013

В IE вы должны использовать 

attachEvent("onmessage", postMessageListener, false);

вместо 

addEventListener("message", postMessageListener, false);
3 голосов
/ 20 сентября 2011

Основной обходной путь, который я видел, включает установку значения хеш-функции в родительском окне и обнаружение значения хеш-функции в родительском окне, синтаксический анализ значения хеш-функции для получения данных и выполнения любых действий. Вот один из примеров того, как это сделать: http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/. Есть и другие варианты через Google, такие как этот: http://easyxdm.net/wp/.

0 голосов
/ 20 сентября 2011

Это намного проще, чем это.

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

Все, что вам нужно, это 

yourframename.document.getElementById('idofsomethinginttheframe')

А затем изнутри фрейма адресуйте что-нибудь за ее пределами с помощью 

parent.document
...