Обнаружение изменения ориентации в междоменном фрейме - PullRequest
Новая
       14

Обнаружение изменения ориентации в междоменном фрейме

11 голосов
/ 25 января 2011

Итак, у меня есть страница .jsp, в которой есть iframe.Содержание этого iframe размещено на отдельном домене.На мобильном устройстве я ищу этот iframe, чтобы обнаружить изменение ориентации и соответственно изменить размеры контента.

Есть ли способ добавить прослушиватель событий к контенту, сохраненному в этом iframe, который быобнаружить изменение ориентации?

Если это содержимое не было в пределах iframe, и к нему был получен прямой доступ, например, вызов: window.addEventListener ('directionchangechange, FunctionToBeCalled, false);успешно ловит изменение ориентации и вызывает соответствующую функцию.Тем не менее, я не могу заставить это работать изнутри iframe.Я пробовал parent.addEventListener, parent.window.addEventListener, top.addEventListener и т. Д., Но безрезультатно.

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

Любая помощь будет очень полезнойоценили.Спасибо!

1 Ответ

14 голосов
/ 06 октября 2011

Если у вас есть код родительского окна, вы можете использовать сообщения между документами для решения этой проблемы. Вы можете отправить ориентацию из родительского окна в iframe. Это также должно работать в междоменном сценарии. Я проверял это на iPhone 4.3 и Android 2.2.

В родительском окне: зарегистрируйтесь для изменения ориентации и перенесите его в iframe 

window.addEventListener("orientationchange", function(){
                var iframe = document.getElementById("youriframe").contentWindow;
                iframe.postMessage({
                    orientation: window.orientation
                }, 'http://the.domain.of.the.iframe.com');
}, false)

В iframe: подписаться на изменения ориентации от родителя 

window.addEventListener("message", function(e){
            var newOrientationValue = e.data.orientation;
            alert(newOrientationValue); // <--- DO your own logic HERE
}, false)

Проверьте это для более подробной информации: http://html5demos.com/postmessage2

...