あなたのウェブサイトを開く際に URL に #test-bu
を付加すると、バーが常に表示されます。例: http://browser-update.org/#test-bu
ページが新しいタブで再読込されていることを確認してください。
詳細(英語)
以下のオプションがスクリプトに渡されます:
$buoop = {
required: {i:8,f:25,o:17,s:9,c:22},
// 要求するブラウザバージョンの指定
// これより古いブラウザには通知が表示されます。
// f:22 ---> Firefox < 22 に通知
// 負の値を指定すると、そのブラウザの最新のバージョンよりいくつ前までのバージョンを許容するかを指定できます。
// c:-5 ---> Chrome < 35 に通知、Chrome の最新バージョンが 40 の場合.
// 詳細(英語)
reminder: 24,
// メッセージが再表示されるまでの時間
// 0 = 毎回表示する
reminderClosed: 150,
// ユーザがメッセージを明示的に閉じた場合,x 時間後に再表示する
onshow: function(infos){},
onclick: function(infos){},
onclose: function(infos){},
// 通知が表示された / クリックされた / 閉じられた後のコールバック関数
l: false,
// メッセージの固定の言語を指定する。e.g. "en" これは標準の検出機能を上書きします。
test: false,
// true = 常にバーを表示する(検証用)
text: "",
// カスタム通知テキスト(html)
// プレースホルダ {brow_name} はブラウザの名前、{up_but} は更新リンクタグの内容、{ignore_but} は無視リンクの内容で置換されます。
// 例: "お使いのブラウザ {brow_name} は古いバージョンです。 <a{up_but}>更新する</a> または <a{ignore_but}>無視する</a>."
// 詳細(英語)
text_in_xx: "",
// 言語 "xx" でのカスタム通知テキスト
// e.g. text_de でドイツ語、text_it でイタリア語
newwindow: true,
// 新しいウィンドウ/タブでリンクを開く
url: null,
// 通知をクリックした後に誘導される URL
noclose:false,
// 通知を閉じる際に「無視する」ボタンを表示しない
nomessage: false,
// ブラウザが古い場合に通知を表示せず、onshow コールバック関数のみ呼び出す
jsshowurl: "//browser-update.org/update.show.min.js",
// 通知を表示するスクリプトが存在する URL です。これはユーザが実際に古いブラウザを使用している場合にのみ読み込まれます。
container: document.body,
// 通知が挿入される DOM 要素です。
no_permanent_hide: false
// 恒久的に通知を表示しない選択肢をユーザに提供しない
api: xxx
// 使用する browser-update api のバージョンです。削除しないでください。
};
パラメータ | 概要 | 値 | 既定値 | 型 |
---|---|---|---|---|
style |
通知が表示される場所。利用可能なオプション: "top", "bottom", "corner" | "top", "bottom", "corner" | "top" | string |
shift_page_down |
Shift down the page in order not to obscure content behind the notification bar. Adds
margin-top to the <body> tag.
|
true, false | true | boolean |
notify_esr |
Also notify Firefox ESR (Extended Support releases) versions if they are below requirement - although they are still supported. Default is to not notify them. They are supported by mozilla for about a year after their initial release. | true, false | false | boolean |
text |
カスタム通知テキスト(html) 詳細(英語) |
text: {
'msg':'Your web browser ({brow_name}) is out of date.',
'msgmore': 'Update your browser for...',
'bupdate': 'Update browser',
'bignore': 'Ignore',
'remind': 'You will be reminded in {days} days.',
'bnever': 'Never show again'
} |
dictionary or string | |
text_for_x |
custom notification text for browser x 詳細(英語) |
undefined |
dictionary or string | |
text_in_xx |
言語 "xx" でのカスタム通知テキスト e.g. text_de でドイツ語、text_it でイタリア語 詳細(英語) |
undefined |
dictionary or string | |
text_for_x_in_xx |
custom notification text for browser x in language xx text_for_i: {'msg':'Internet Explorer is not supported on this site.'}
|
undefined |
dictionary or string | |
nostatistics |
For every 1000th visitor anonymous statistics on the used browser are collected. Turns off sending anonymous statistics. |
true, false |
false |
boolean |
以下の CSS ルールが通知に適用されます。ご自身の CSS で書き換えることもできます。そのためには、CSS に詳細度(specificity)を追加する必要があります。e.g.
body .buorg {font-size:20px}
.buorg {
position: absolute;
position: fixed;
z-index: 111111;
width: 100%;
top: 0px;
left: 0px;
border-bottom: 1px solid #A29330;
text-align: center;
color: #000;
background-color: #fff8ea;
font: 18px Calibri, Helvetica, sans-serif;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
animation: 1s ease-out 0s buorgfly
}
.buorg-pad {
padding: 9px;
line-height: 1.7em;
}
.buorg-buttons {
display: block;
text-align: center;
}
#buorgig, #buorgul, #buorgpermanent {
color: #fff;
text-decoration: none;
cursor: pointer;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
padding: 1px 10px;
border-radius: 4px;
font-weight: normal;
background: #5ab400;
white-space: nowrap;
margin: 0 2px;
display: inline-block;
}
#buorgig {
background-color: #edbc68;
}
@media only screen and (max-width: 700px) {
.buorg div {
padding: 5px 12px 5px 9px;
line-height: 1.3em;
}
}
@keyframes buorgfly {
from {
opacity: 0;
transform: translateY(-50px)
}
to {
opacity: 1;
transform: translateY(0px)
}
}
.buorg-fadeout {
transition: visibility 0s 8.5s, opacity 8s ease-out .5s;
}
.buorg-icon {
width: 22px;
height: 16px;
vertical-align: middle;
position: relative;
top: -0.05em;
display: inline-block;
background: no-repeat 0px center;
}