iframeがあるコンテンツの画面制御

スマホでiframeを用いた画面制御とか

###　目的
画面内にifrmeを用いて外部から読み込みを行った場合の画面制御

１：呼び出したifarmeを縮小してヨコに表示する

２：画面が回転された場合に文言を表示する

大本の画面の作成

<div id="contents_area">
    <iframe src="呼び出したいURL"
            width="1280px"
            height="720px"
            allowtransparency="true"
            frameborder="0"
            id="game_area_frame"
            name="game_area_frame"></iframe>
</div>

１：iframeの表示を横にする

//contents_areaがIframeの上の階層のタグのなので
    contents_area = document.getElementById("contents_area");
    contents_area.style.cursor ="inherit";
    contents_area.style.position ="relative";
    contents_area.style.top = -0.5 + "px";
    contents_area.style.bottom = 0 + "px";
    contents_area.style.left = gl_scale_left + "px";
    contents_area.style.right = 0 + "px";
    contents_area.style.transformOrigin = "0% 0% 0px";
    contents_area.style.otransformOrigin ="0% 0% 0px";
    contents_area.style.webkittransfOrmorigin ="0% 0% 0px";
    contents_area.style.moztransformOrigin ="0% 0% 0px";
    contents_area.style.mstransformOrigin ="0% 0% 0px";
    contents_area.style.transform = "matrix(0, 1, -1, 0, 0, 0) scale(" + gl_scale_px + ")";
    contents_area.style.otransform = "matrix(0, 1, -1, 0, 0, 0) scale(" + gl_scale_px + ")";
    contents_area.style.webkittransform = "matrix(0, 1, -1, 0, 0, 0) scale(" + gl_scale_px + ")";
    contents_area.style.moztransform = "matrix(0, 1, -1, 0, 0, 0) scale(" + gl_scale_px + ")";
    contents_area.style.mstransform = "matrix(0, 1, -1, 0, 0, 0) scale(" + gl_scale_px + ")";

今回はscaleとtransformを用いてヨコにして縮尺をしました。

これで横にする準備ができましたが、スマホ、OSごとに画面比が違いますので

//global変数
var gl_ua = navigator.userAgent;
var gl_scale_px = 0.48;
var gl_scale_left = 355;
var gl_bg_height = 635;
var gl_bg_width = "100%";

    //iPhone端末
if (gl_ua.indexOf('iPhone') > 0 || gl_ua.indexOf('iPad') > 0) {
    gl_scale_px = 0.48;
    gl_scale_left = 355;
    gl_bg_height = 635;
    gl_bg_width = "100%";
    
    //Android端末
} else if (gl_ua.indexOf('Android') > 0) {
    gl_scale_px = 0.38;
    gl_scale_left = 310;
    gl_bg_height = 505;
    gl_bg_width = "100%";
}

のようにwidthとheightを決めておきます。

これだけで横画面にして縮尺ができます。
（javascriptはjQueryを読み込んでいない場合を想定して書いております。）

２-１：画面が回転された場合の文言作成

javascriptを無効にされていたい場合の文言を
display noneでおいておきます。

<div id="alert_view_screen_txt" style="display: none">
    この画面は「画面の向きをロック」を縦に設定の上、
    端末画面を横向きにする必要がございます。
    「画面の向きをロック」を縦に設定してください。
</div>

このようにユーザーに呼びかけるような文言をおいておきます。

次にjavascript側で画面回転を検知して文言を表示するようにします。

２-２：画面回転を検知してdisplayを変えるjavascript

//横回転があった場合のtext表示
$(window).on("load orientationchange resize", function() {
    alert_screen_txt = document.getElementById("alert_view_screen_txt");
    main_bg_frame = document.getElementById("main_bg_frame");
    var deg = false;
    switch (Math.abs(window.orientation)) {
        case -90: //右90度回転
            deg = true;  break;
        case 0:  //回転なし
            deg = false; break;
        case 90: //左90度回転
            deg = true; break;
        case 180: //180度回転
            deg = true; break;
    }
    
    //回転の判定
    if (deg) {
		 //回転している。文言を表示する
        alert_screen_txt.style.display = 'block';
        main_bg_frame.style.top = '85px';
    } else {
    	 //回転なし。文言表示を消す
        alert_screen_txt.style.display = 'none';
        main_bg_frame.style.top = '0px';
    }
});

（これもjavascriptはjQueryを読み込んでいない場合を想定して書いております。ミス）
すみません、ここは普通にjQueryを使ってます。上で使用しなかったのは、気まぐれです。

この記事の肝は
scaleとtrasformでiframeを自由に回転、縮尺して自由に置けるというところにあります。

これで終わり。