모바일에서 하위 iframe에서 부모창 가로값 가져오기

모바일에서 하위 iframe에서 부모페이지의 width 값을 가져올 때, 실제 width값을 가져오지 못하는 오류가 있다. Chrome에서 개발자 모드로 iframeScreenWidth와 parentScreenWidth를 체크하면 값이 같게 나온다. 하지만, 실제 아이폰에서 alert를 띄어 두 값을 체크하면 다르게 나온다. 그래서 실제 부모 페이지의 width값을 가져오려면 window.innerWidth를 보다는 $(top.document).width()로 작성해야 한다. 기본적으로 모바일에서는 iframe 사용을 자제해야 한다.

var $container = $("#iframe").contents().find("#container");
var $table = $container.find("table") || null;
var iframeScreenWidth = window.innerWidth || 0;
var parentScreenWidth = $(top.document).width() || 0;
var scaleRatio = 1;

if ($table.length) {
    // scaleRatio = iframeScreenWidth / parseInt($table.width(), 10);
    scaleRatio = parentScreenWidth / parseInt($table.width(), 10);
    $table.css({
        'transform': 'scale(' + scaleRatio + ') translate3d(0, 0, 0)',
        'transform-origin': '0 0',
        '-webkit-transform': 'scale(' + scaleRatio + ') translate3d(0, 0, 0)',
        '-webkit-transform-origin': '0 0',
    });
}