概要

IEで動くwebシステムを構築するにあたってIEとしてのブラウザ機能を制限する必要があり、対処方法の忘備録をここにまとめる。

使うもの

IE11
Javaアプリケーション(今回はSpringBootで試す)

やりたいこと

下記のIEブラウザ機能が制限された状態で業務システム起動したい。

アドレスバーを非表示にする
戻るボタンと進むボタンは使用させたくない
メニューバーを非表示にする
画面はリサイズ可能

検討内容と対処

IE起動時は各バーが初期表示されている。
初期表示時から制限できるかどうか、IEの起動オプションを調べてみた。

Internet Explorer コマンドラインオプションのまとめ

起動オプションがいくつかあるようだが、-kのキオスクモードが使えるかもしれない。
ウィンドウキー＋Rでファイル名を指定して実行を表示し、キオスクモードでgoogleを表示してみる。
iexplore -k http://www.google.co.jp
ブラウザメニュー機能がまったくなく、純粋はhtml部分だけの画面が表示されている。
内容としては期待値に近しいが、最大化で表示されるわ最小化できないわ、これじゃ使えない。

画面遷移時にブラウザ制限できるかどうかを検討してみた。
windows.open()やwindow.showModalDialog()の第３引数に画面サイズ等を指定できるので試してみる。

MDN-window.open
MDN-window.showModalDialog

before1.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>画面起動用</title>
    </head>
    <body>
        <button onclick="showwindow()">画面起動</button>
        <script type="text/javascript">
            function showwindow() {
                var features = 'menubar=no,location=no,resizable=yes,scrollbars=yes,status=no,height=768,width=1280';
                window.open('./after', '_blank', features);
            }
        </script>
    </body>
</html>

after.html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>メイン</title>
    </head>
    <body>
        <span th:text="'これはメイン画面です。ようこそ '  +  ${name}"></span>
    </body>
</html>

FlowtestController.java

package hello;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class FlowtestController {

    @GetMapping("/after")
    public String main(@RequestParam(name="name", required=false, defaultValue="test") String name, Model model) {
        model.addAttribute("name", name + "さん");
        return "after";
    }
}

SpringBootでbefore.htmlを起動し、ボタンをクリックするとafter.htmlはメニューバーとアドレスバーが非表示となった。
画面としては期待通りだが、新しいウィンドウで開くため繊維元画面が残っている。
before.htmlのwindow.openの第２引数を'_blank'→'_self'にすると、画面表示内容だけが変わってブラウザ機能は変化しない。←まぁ、当たり前なんだが･･･
新しいウィンドウで開かれたページはブラウザ制御ができるので、繊維元のウィンドウを削除する。

before2.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>画面起動用</title>
    </head>
    <body>
        <button onclick="showwindow()">画面起動</button>
        <script type="text/javascript">
            function showwindow() {
                var features = 'menubar=no,location=no,resizable=yes,scrollbars=yes,status=no,height=768,width=1280';
                window.open('./after', '_blank', features);
                window.open("", "_self").close();
            }
        </script>
    </body>
</html>

新しいウィンドウを開いた後に、実行していた繊維元のウィンドウを閉じる。
それだけの対応で目的が達成できた。

まとめ

windows.open()やwindow.showModalDialog()の第３引数に画面サイズ等のオプションが可能
IEで動かないhtmlやcssがあるので、使えるタグの確認が面倒←これは主観でした。

IEのブラウザ制御に立ち向かった忘備録

概要

使うもの

やりたいこと

検討内容と対処

まとめ