Обнаружить изменение ориентации внутри междоменного iframe

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

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

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

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

Любая помощь будет принята с благодарностью. Спасибо!

Ответы

Ответ 1

Если вы являетесь владельцем кода родительского окна, вы можете использовать перекрестные документы, чтобы решить эту проблему. Вы можете отправить ориентацию из родительского окна в 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