はじめに
Javascriptで別ウィンドウの画面を表示させたい場合、window.openを利用することで表示をさせることが可能ですが、別ブラウザを起動させて画面を表示させるための備忘録として残しておきます。
IE限定ですが、、、、、
ソース
Javascriptではローカルのファイルを見に行けないので、ActiveXを用いてローカルのChromeブラウザを起動させる。
<html>
<head>
<title>別ブラウザ起動検証</title>
<meta charset="UTF-8">
<script>
function hoge() {
var wScriptShell = new ActiveXObject("WScript.Shell");
wScriptShell.CurrentDirectory = "C:/Program Files/Google/Chrome/Application/";
var wshSysEnv = wScriptShell.Exec("chrome.exe https://qiita.com/ebichan_88/");
}
function fuga() {
window.open('https://qiita.com/ebichan_88/', null, 'toolbar=yes,menubar=yes,scrollbars=yes');
}
</script>
</head>
<body>
<div>
<a href="javascript:hoge();">ChromeブラウザでQiita表示</a>
</div>
<br>
<div>
<a href="javascript:fuga();">現在開いているブラウザでQiita表示</a>
</div>
</body>
</html>
実行結果
初期表示
window.openを利用しているリンクを押下した場合
- 元画面がIEの場合、window.openを実行した場合にIEで画面が表示される
ActiveXを利用しているリンクを押下した場合
- ActiveXを利用しているリンクを押下した場合、ローカルで指定したブラウザが表示される
問題点
上記の実装の問題点
上記実装の場合、Chromeで起動することは可能となりましたが、IEで設定している'toolbar=yes,menubar=yes,scrollbars=yes'が有効化されていません。
Chromeのコマンドラインを確認しましたが、JavaScriptのwindow.openのオプションで設定できるウィンドウサイズなどの設定のすべてをChromeのコマンドラインで実現するのは難しそうです。
対応
Chromeで起動した画面で'toolbar=yes,menubar=yes,scrollbars=yes'のオプションを設定したwindow.openを実行させることで、Chrome側でも画面サイズ等の設定が可能です。
index.html
<html>
<head>
<title>別ブラウザ起動検証</title>
<meta charset="UTF-8">
<script>
function hoge() {
var wScriptShell = new ActiveXObject("WScript.Shell");
wScriptShell.CurrentDirectory = "C:/Program Files/Google/Chrome/Application/";
- var wshSysEnv = wScriptShell.Exec("chrome.exe https://qiita.com/ebichan_88/");
+ var wshSysEnv = wScriptShell.Exec("chrome.exe C:/work/qiita/20_IE/chrome_exec_index.html");
}
function fuga() {
window.open('https://qiita.com/ebichan_88/', null, 'toolbar=yes,menubar=yes,scrollbars=yes');
}
</script>
</head>
<body>
<div>
<a href="javascript:hoge();">ChromeブラウザでQiita表示</a>
</div>
<br>
<div>
<a href="javascript:fuga();">現在開いているブラウザでQiita表示</a>
</div>
</body>
</html>
chrome_exec_index.html
<html>
<head>
<title>Chrome起動画面</title>
<meta charset="UTF-8">
<script>
function execute() {
window.open('https://qiita.com/ebichan_88/', null, 'toolbar=yes,menubar=yes,scrollbars=yes');
window.close();
}
</script>
</head>
<body onload="execute()">
</body>
</html>