Can I use the mobile WebViewer in an iframe?

[Kevin Kuo]

Q: Can I use the mobile WebViewer in an iframe? I've tried it on the iPad and I see the top and bottom menus being cut off. Also rotating the device causes the pages to be placed incorrectly.

A: In general, we recommend not using WebViewer Mobile within an iframe because JavaScript code within an iframe cannot detect orientation change. There are also some bugs on certain devices that prevents the viewing area height and width calculations to be correct.

However, this workaround can be used if necessary. Place the following JS code and CSS in the top most window (i.e. outside of the iframe).

The JS code here will capture the orientation change events and attempt to pass the updated width and height into the iframe.

Please note that page outside the iframe must be from the same origin for this to work. 

This snippet also takes into account of an iOS7 Safari bug where window.innerHeight is incorrect when in landscape mode.

CSS:

@media (orientation:landscape) {

html.ipad.ios7 > body {

position: fixed;

bottom: 0;

width:100%;

height: 672px !important;

}

}

JS:

$(function() { if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('html').addClass('ipad ios7'); } $(window).on("orientationchange", function(){ //when using the mobile viewer in an iframe, the orientationchange event is only triggered on the top window. //the desired height and width of the mobile viewer must be set explicitly. //if the mobile viewer should take up 100% of the screen space, simply set the iframe content window's innerHeight and innerWidth //to the top window's respective values. if($('html').hasClass("ipad ios7") && Math.abs(window.orientation) === 90){ //workaround for iOS7 bug where window height is incorrect //http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue/19449123#19449123 $('#viewerFrame')[0].contentWindow.innerHeight = 672; }else{ //resize the iframe content $('#viewerFrame')[0].contentWindow.innerHeight = $(window).height(); } $('#viewerFrame')[0].contentWindow.innerWidth = $(window).width(); }); });