<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ブラウザとバージョン確認</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
<!-- linksフォルダーのrule.cssを利用する -->
</head>
<body>
<br>
現在利用しているブラウザのバージョンは以下の通りです
<h1><br>
<script src="links/action.js"></script>
<!-- linksフォルダーのaction.jsを利用する -->
</h1>
</body>
</html>
<!-- index.html -->
JavaScriptは、ほとんどコピー&ペーストですね。
/* action.js */
var browser = "";
var version = 0;
/* browserは無し、versionは0でスタート。ブラウザ判定には[navigator]オブジェクトの[userAgent]プロパティを使用。このプロパティの中にブラウザの「種類」や「バージョン」などの情報が格納されているので、プロパティに指定した文字列(chromeやsafari等)の文字列を[test]メソッドで正規表現チェックし、それが含まれているか否かでブラウザの種類を判断。[¥d]は半角文字。*/
if (/Opera/.test(navigator.userAgent)) {
browser = "Opera";
version = navigator.userAgent.match (/Opera\/(\d+\.\d+)/)[1];
}
else if (/Edg/.test(navigator.userAgent)) {
browser = "Microsoft Edge";
version = navigator.userAgent.match(/Edg\/(\d+\.\d+)/)[1];
}
else if (/Chrome/.test(navigator.userAgent)) {
browser = "Google Chrome";
version = navigator.userAgent.match(/Chrome\/(\d+\.\d+)/)[1];
}
else if (/Safari/.test(navigator.userAgent)) {
browser = "Apple Safari";
version = navigator.userAgent.match(/Safari\/(\d+\.\d+)/)[1];
}
else if (/Firefox/.test(navigator.userAgent)) {
browser = "Mozilla Firefox";
version = navigator.userAgent.match(/Firefox\/(\d+\.\d+)/)[1];
}
document.write(browser);
document.write(" " + version);
document.write("バージョン: " + version);
なお、Internet ExplolerのレンダリングエンジンはTrident(開発終了)、
Chrome(28以降はWebKitから分岐されたBlinkを使用)、 Safari, EdgeのレンダリングエンジンはWebKit、
Firefox や Thunderbird のレンダリングエンジンはGecko、
OperaのレンダリングエンジンはPresto(開発終了)で
(15以降はWebKitから分岐されたBlinkを使用) */
/* action.js */
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
color: #000000;
background-color: #dcdcdc;
text-align: center;
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 1.0;
}
h1 {
font-size: 30px;
color: #ff0000;
}
/* rule.css */