JavaScriptを使ってブラウザのバージョンを判別し、メッセージウィンドをポップアップさせる方法
- JavaScriptを使用して、ブラウザのバージョンを判別し、メッセージウィンドをポップアップさせる方法を知りたいです。
- ブラウザがIEであり、バージョンが7以下、またはIE8以上であり互換表示モードの場合にポップアップを表示したいです。
- HTMLとJavaScriptの関連性について理解が不十分で、どこに返り値を返しているかが分かりません。
- ベストアンサー
IEのバージョンが7以下の際。ポップアップ表示
こんにちわ。 今回やりたいことは、JavaScriptを使って、ブラウザのバージョンを判別し、メッセージウィンドをポップアップさせたいと思っています。 いかんせん、やっと最近HTMLとCSSの使い方がわかってきた程度で、JavaScriptは初心者です。（プログラム自身はVBAなどでそこそこ作っているので、なんとなくやり方はわかるんですが、実装が全く分かりません） 以下のようなサイトを見つけました。 http://jisakupc-technical.info/programing/javasc … 【以下ページ内のプログラム】 // ブラウザのUAを小文字で取得 var userAgent = window.navigator.userAgent.toLowerCase(); // IEの判定 var isIE = (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0); // IEのバージョンを取得 if (isIE) { // 正規表現によりUA文字列を配列に分割 var arr = /(msie|rv:?)\s?([\d\.]+)/.exec(userAgent); version = (arr) ? arr[2] : ''; return 'ie'+version; } else { // IE以外のブラウザ判定 if (userAgent.indexOf('chrome') != -1) { /* Google Chrome. */ return 'chrome'; } else if (userAgent.indexOf('firefox') != -1) { /* FireFox. */ return 'firefox'; } else if (userAgent.indexOf('safari') != -1) { /* Safari. */ return 'safari'; } else if (userAgent.indexOf('opera') != -1) { /* Opera. */ return 'opera'; } else if (userAgent.indexOf('edge') != -1) { /* Edge. */ return 'edge'; } else if (userAgent.indexOf('gecko') != -1) { /* Gecko. */ return 'gecko'; } else { return false; } } 分からないのが、Returnで返り値を返していますが、「どこ」に返しているのでしょうか？ HTML構文内？ この辺の、JavaScriptとHTMLの関連性がよく理解できていません。 最終的にやりたいのは、ブラウザがIEでかつ7以下もしくはIE8以上だが互換表示モードだとポップアップをさせたいということです。 何か良いアドバイスを頂けると大変助かります。
- makushimasu
- お礼率42% (3/7)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
http://jisakupc-technical.info/programing/javascript/4514/ のページにあるスクリプトは関数として組み込まれることを前提としているようです。 つまり、function getBrowser(){ ...ページ内のプログラム... } としたうえで、JavascriptでgetBrowser()を呼び出せば返り値でブラウザ名が取得できます。 ブラウザの情報取得を独自で書くのもいいですが、ライブラリを利用するのもよいでしょう。platform.js (https://github.com/bestiejs/platform.js/) はその一つです。 <script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script> として読み込むだけで platform.name にブラウザ名、platform.version にブラウザのバージョンが記録されます。 参考URLに詳しく書いてあるためここでは詳述しませんが、互換表示モードの検出は少々テクニカルなことをする必要がありそうです。
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
No.1の補足に対して回答します。 ざっと書いてみたところこのような感じになります。ライブラリのplatform.jsはIE11未満に対応していないため使えませんでした。 ---- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> function IeVersion(){ // デフォルト値 var value = { IsIE: false, TrueVersion: 0, ActingVersion: 0, CompatibilityMode: false }; // Tridentバージョン番号を取得 var trident = navigator.userAgent.match(/Trident\/(\d+)/); if(trident){ value.IsIE = true; // Tridentバージョン番号をIEのバージョン番号に変換 value.TrueVersion = parseInt(trident[1], 10) + 4; } // MSIE番号を取得 var msie = navigator.userAgent.match(/MSIE (\d+)/); if(msie){ value.IsIE = true; // UAからIEのバージョン番号を取得 value.ActingVersion = parseInt(msie[1]); }else{ // IE11はEdgeモード value.ActingVersion = value.TrueVersion; } // TridentとMSIEのバージョンの両方が取得できた時は比較 if(value.TrueVersion > 0 && value.ActingVersion > 0){ // 互換モードの時はTridentのバージョンとMSIEバージョンが異なる value.CompatibilityMode = value.TrueVersion != value.ActingVersion; } return value; } function popup(){ // ポップアップを表示する関数 alert("対象のブラウザです!"); } // これより下はページ読み込み時に即時実行されます var ie = IeVersion(); if(ie.IsIE){ if( ie.ActingVersion <= 7 || ie.ActingVersion > 7 && ie.CompatibilityMode ){ popup(); } } </script> </head> <body> </body> </html> ※OKWaveの仕様上、インデントを全角スペースで表現しています。コピペの際はご注意ください。 JavascriptはVBAと多少文法が違う点がありますが、そこは少し調べれば問題ないでしょう。
お礼
大変親切なコメントどうもありがとうございます。 大変分かりやすく参考になりました。 文法違いのところは・・・なんとなく理解はできるので、今から詳細を調べさせていただき、しっかり覚えます。 なるほど、JavaScriptはページ実行時に「即時実行」されるわけですね。（と判断しました） 実装時は書く順番等は考えないと、同じようなものが被るとごちゃごちゃになりそうですね。 内容の方は先ほどテストさせていただきました。 しっかり動作していました。 ここまで作成していただいてまことに感謝の念を禁じえません。 本当にありがとうございます。 早速、明日このコードをもって、現場環境で試してみたいと思います。
関連するQ&A
- ブラウザ判別スクリプト
ブラウザ別にcssを読み込みたいのですが、 firefox2.0に反映されません。 どうしてでしょうか？ <!--ブラウザ判別 function getOSType() { var uAgent = navigator.userAgent.toUpperCase(); if (uAgent.indexOf("MAC") >= 0) return "MacOS"; if (uAgent.indexOf("WIN") >= 0) return "Windows"; if (uAgent.indexOf("X11") >= 0) return "UNIX"; return ""; } // Netscape Navigator -> Netscape // Internet Explorer -> Explorer // Safari -> Safari // Opera -> Opera function getBrowserName() { var aName = navigator.appName.toUpperCase(); var uName = navigator.userAgent.toUpperCase(); if (uName.indexOf("SAFARI") >= 0) return "Safari"; if (aName.indexOf("MICROSOFT") >= 0) return "Explorer"; if (uName.indexOf("FIREFOX") >= 0) return "Firefox"; return ""; } function getBrowserVersion() { var browser = getBrowserName(); var version = 0; var s = 0; var e = 0; var appVer = navigator.appVersion; var uName = navigator.userAgent.toUpperCase(); if (browser == "Safari") { version = eval(appVer.substring(0,3)) - 4; } if (browser == "Explorer") { appVer = navigator.userAgent; s = appVer.indexOf("MSIE ",0) + 5; e = appVer.indexOf(";",s); version = eval(appVer.substring(s,e)); } if (browser == "Firefox") { s = uName.indexOf("FIREFOX/",0); version = parseFloat(uName.substring(s+8,s+8+3)); } return version; } //--> <!--top.js os = getOSType(); browser = getBrowserName(); version = getBrowserVersion(); if (os == "MacOS") dirName = "css/mac/"; if (os == "Windows") dirName = "css/win/"; if (os == "UNIX") dirName = "css/unix/"; if (browser == "Explorer") dirName += "ie"; if (browser == "Safari") dirName += "saf"; if (browser == "Firefox") dirName += "ff"; if ((version >= 1) && (version < 2)) dirName += "top.css"; if ((version >= 2) && (version < 3)) dirName += "top.css"; if ((version >= 3) && (version < 4)) dirName += "top.css"; if ((version >= 4) && (version < 5)) dirName += "top.css"; if ((version >= 5) && (version < 5.5)) dirName += "top.css"; if ((version >= 5.5) && (version < 6)) dirName += "top.css"; if ((version >= 6) && (version < 7)) dirName += "top.css"; if ((version >= 7) && (version < 8)) dirName += "top.css"; document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); //-->
- ベストアンサー
- JavaScript
- 外部javascriptの読み込み方
下記ソースのjavascriptにて外部javascript内容を読み込もうとしています ==呼び出すファイル(test.htm)========================== <head> <script type="text/javascript" src="common.js"> <!-- function init() { setBrowser(); alert(getBrowser()); } --> </script> </head> <body onload="init();"> てすと </body> </html> ================================================== ==呼び出されるファイル（common.js）=================== <!-- var strBrowser; function setBrowser() { if(navigator.userAgent.indexOf("MSIE") != -1){ // IE strBrowser = "IE"; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // FireFox strBrowser = "Firefox"; } else if(navigator.userAgent.indexOf("Safari") != -1){ // Chrome & Safari strBrowser = "Safari"; } else{ strBrowser = ""; } } function getBrowser() { return strBrowser; } //--> ================================================= これで呼び出す事ができません。 何処が悪いのか、ご指摘頂ければ幸いです。
- ベストアンサー
- JavaScript
- Macfirefox3とMacfirefox2以下でCSSを切り替えたい
MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい！ ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }
- ベストアンサー
- JavaScript
- SafariのIframeで高さが取得できません
<script language="JavaScript"> <!-- function frame_check(){ if(main.document.body){ if(navigator.userAgent.indexOf("Opera") != -1){ // 文字列に「Opera」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("MSIE") != -1){ // 文字列に「MSIE」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // 文字列に「Firefox」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Netscape") != -1){ // 文字列に「Netscape」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Safari") != -1){ // 文字列に「Safari」が含まれている場合 var f = main.documentElement.offsetHeight; } if(f) document.getElementById("frame_set").height=f+20; setTimeout("frame_check()",100); }else{ setTimeout("frame_check()",100); } } setTimeout("frame_check()",10); --></script> <iframe name="main" id="frame_set" src="mainf.html" width="800" height="4000" frameborder="0" scrolling="no"></iframe> 上記のスクリプトを作成しましたが、IE7、 Firefoxではうまくいきますが、SafariではIframeに表示するページの高さが取得できません。 どこが問題なのかご教授お願いいたします。
- 締切済み
- JavaScript
- Safariを判別し別ページに飛ばすには
javascriptでブラウザを判別して、ブラウザによって違うページに飛ばしています。 基本的にはIEとそれ以外なのですが、Safariだけが別ページに飛んでくれません。（index.htmlにいたままになる） 下記のようにしていますが、どうすれば飛ぶようになるでしょうか？ よろしくお願いします。 <script type="text/javascript"> if(navigator.userAgent.indexOf("MSIE") != -1){ window.location.href = "index.html";} ： else if(navigator.userAgent.indexOf("safari") != -1){ window.location.href = "index2.html";} </script>
- ベストアンサー
- JavaScript
- IE6だけの判定、IE7だけの判定について
こんにちは。 下記の「IE6だけの判定方法（JavaScript）」で、どれが一番いいのか、 或は、もっと正確で簡素な良い方法があるのかどうかを教えてください。 また、IE7だけの判定方法も記載しますので、ご指導お願いします。 色々試した結果は、一応全部ＯＫでした。 ただ、プログラマーでないので心配なので質問させて頂きました。 もうひとつ、!!は何かundefinedやfunctionを、true、falseへと整形してるようですが、 これを、業界用語で何って言うのかも、教えてください。よろしくお願いします。 <script> /* IE6だけの判定方法 */ // (1) var ua = navigator.userAgent.toLowerCase(); var bver = (ua.match(/.+(?:rv|webkit|khtml|opera|msie)[\/: ]([\d.]+)/ ) || [0,'0'])[1]; var isIE6a = (/msie/.test(ua) && !/opera/.test(ua) && parseInt(bver) < 7 && (!window.XMLHttpRequest || typeof(XMLHttpRequest) === 'function')); if (isIE6a) document.write('IE6'); // (2) var isIE6b = document.uniqueID && document.compatMode && !window.XMLHttpRequest && document.execCommand; if (!!isIE6b) document.write('IE6'); // (3) var isIE6c = /msie|MSIE 6/.test(navigator.userAgent); if (isIE6c) document.write('IE6'); /* IE7だけの判定方法 */ var isIE7 = window.XMLHttpRequest && (/*@cc_on!@*/false) && !(document.documentMode >=8); if (!!isIE7) document.write('IE7'); </script>
- ベストアンサー
- JavaScript
- javascriptで別ページに・・・ 続編
こんにちは。 前回質問させて頂いた事で、特定のユーザーエージェントからのアクセスを任意の別ページに飛ばす方法に成功しました。 下記がそのソースです。 このソースの例では、Internet ExplorerからのアクセスをヤフージャパンTOPページに飛ばす方法です。 ------------------- <script type="text/javascript"> <!-- document.write('<p>ブラウザの判別：'); if(navigator.userAgent.indexOf("Opera") != -1){ // 文字列に「Opera」が含まれている場合 document.write('あなたのブラウザは Opera ですね？'); } else if(navigator.userAgent.indexOf("MSIE") != -1){ // 文字列に「MSIE」が含まれている場合 location.href="http://www.yahoo.co.jp/"; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // 文字列に「Firefox」が含まれている場合 document.write('あなたのブラウザは Firefox ですね？'); } else if(navigator.userAgent.indexOf("Netscape") != -1){ // 文字列に「Netscape」が含まれている場合 document.write('あなたのブラウザは Netscape ですね？'); } else if(navigator.userAgent.indexOf("Safari") != -1){ // 文字列に「Safari」が含まれている場合 document.write('あなたのブラウザは Safari ですね？'); } else{ document.write('判別できませんでした。'); } document.write('</p>'); // --> </script> ----------------------------------- これに対して追加質問させて頂きます。 (1)ユーザーエージェントの指定が上記のままではInternet Explorer利用者の全員が対象になってしまうので、さらにUAを絞り込んで、 例 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 6.1; SV1) ↑この様に、より長く具体的に絞り込んでUAを指定する事は不可能でしょうな。 自己のアクセス解析で得られた情報を記述してテストしましたが、成功しませんでした。 半角や全角の違いか？それともスペースに問題があるのか分かりません。 (2)上記の例では、ユーザーエジェントで判定しておりますが、ホストで判定する事は不可能でしょうか。 自己の場合の「softbank***********.bbtec.net」でテストしましたが、やはり成功しませんでした。 お手数ですが宜しくお願いします。
- 締切済み
- JavaScript
- WinとMacのFirefox以外は違うindexに飛ばすスクリプトについて
Javascript初心者です。 iframeを使用したHP作成後、ブラウザCheckしたところ（細かいバージョン指定まではしていません） Windows版のブラウザはほぼ全般○ですが、MacはFirefox以外×でした。 なのでindex.htmlに下記判別をさせたいのです。↓ 「OSがwinの場合とOSがMacでブラウザがFirefox（Gecko）の場合はそのまま、 それ以外はindex2.htmlに飛ばす。」 スクリプトを自分なりに書いてみたのですが、これであっているのかが、自信がありません。 どなたか上記方法をご存知の方、または下記スクリプトの間違いがわかる方。 お願いします、教えてください。 if(navigator.appVersion.indexOf("win") != -1){ document.write(); else if(navigator.appVersion.indexOf("Mac") != -1){ if{(navigator.userAgent.indexOf('Gecko/')!=-1) document.write(); } else{ location.replace("index2.html"); } }
- 締切済み
- JavaScript
- IEでのみ作動しないJavaScriptがあり困っています
自分のサイトでFLV動画を流したいのですが、動画の再生にはFlashPlayer8以上が必要です。 そこで、Dreamweaverが自動で挿入してくれるスクリプトでプレイヤーの有無とバージョンを確認し、 無い又は8未満の場合にはアドビのダウンロードページへ誘導できるようにしました。 しかし、IE（確認したのは6）でのみ作動してくれません。 Firefox、Safari、Operaでは問題なく動きます。 何か解ることがあれば教えて下さい。 よろしくお願いいたします。 問題のスクリプトを以下に示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>検出試験</title> <script type="text/javascript"> function MM_CheckFlashVersion(reqVerStr,msg){ with(navigator){ var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1); var isWin = (appVersion.toLowerCase().indexOf("win") != -1); if (!isIE || !isWin){ var flashVer = -1; if (plugins && plugins.length > 0){ var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : ""; desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc; if (desc == "") flashVer = -1; else{ var descArr = desc.split(" "); var tempArrMajor = descArr[2].split("."); var verMajor = tempArrMajor[0]; var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r"); var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0; flashVer = parseFloat(verMajor + "." + verMinor); } } // WebTV has Flash Player 4 or lower -- too low for video else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0; var verArr = reqVerStr.split(","); var reqVer = parseFloat(verArr[0] + "." + verArr[2]); if (flashVer < reqVer){ if (confirm(msg)) window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"; } } } } </head> <body onload="MM_CheckFlashVersion('8,0,0,0','このページのコンテンツを表示するには最新バージョンの Adobe Flash Player が必要です。今すぐダウンロードしますか?');"> </body> </html>
- ベストアンサー
- JavaScript
- スクロール位置を中央にしたい
こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 function getScroll(){ var x, y; if(document.all !== void 0){ // IE4, IE5, IE6 x = document.body.scrollLeft; y = document.body.scrollTop; }else if(document.layers !== void 0 || (navigator.userAgent.indexOf("Opera") != -1 || window.opera !== void 0)){ // NN4, Opera6 x = window.pageXOffset; y = window.pageYOffset; }else if(navigator.userAgent.indexOf("Gecko") != -1){ // NS6, Mozilla x = window.scrollX; y = window.scrollY; }else{ x = y = 0; } return {x: x, y: y}; } // スクロール始めのスクロール量 var SCROLL ; var divCountScroller = 50 ; // 分割数 // 現在のスクロール位置から、指定座標までスクロールします function scroller( x, y, count ){ if( count === void 0 ){ count = 0 ; SCROLL = getScroll(); } if( count++ < divCountScroller ){ var c = count/divCountScroller ; var nx = SCROLL.x+( x-SCROLL.x )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); var ny = SCROLL.y+( y-SCROLL.y )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); window.scrollTo( nx, ny ); setTimeout( "scroller("+x+","+y+","+count+");", 30 ); } }
- 締切済み
- JavaScript
補足
コメントありがとうございます。 このような外部ライブラリもあったんですね。 これも参考にさせていただきます。 このライブラリを使用した場合でも、やはりわからないのが実装方法です。 例えば、普通のプログラムだと、仮にウィンドを開かせる命令を「OPEN」としたとき、 IF platform.name=IE then open end となると思いますが、これをHTMLでどう書けばいいのかがわかりません。 かなり初歩的なご質問になってしまい申し訳ございませんが、いただけましたら幸いです。