概要
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()
の第3引数に画面サイズ等を指定できるので試してみる。
MDN-window.open
MDN-window.showModalDialog
<!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>
<!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>
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の第2引数を'_blank'→'_self'にすると、画面表示内容だけが変わってブラウザ機能は変化しない。←まぁ、当たり前なんだが・・・
新しいウィンドウで開かれたページはブラウザ制御ができるので、繊維元のウィンドウを削除する。
<!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()
の第3引数に画面サイズ等のオプションが可能
IEで動かないhtmlやcssがあるので、使えるタグの確認が面倒←これは主観でした。