自定义与测试
测试脚本
如果您打开的网页的链接末尾带有 #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,
// x小时后重复显示通知
// 0 = 总是显示
reminderClosed: 150,
// x小时后重复显示通知，即使用户已明确关闭
onshow: function(infos){},
onclick: function(infos){},
onclose: function(infos){},
// 当通知生成/被点击/被关闭时调用的回调函数
l: false,
// 给通知选取语言，例如"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"自定义通知文字
// 例如，text_de表示德语，text_it表示意大利语
newwindow: true,
// 在新窗口或标签中打开链接
url: null,
// 点击通知后跳转到此链接
noclose:false,
// 不显示用来关闭通知的“忽略”按键
nomessage: false,
// 当浏览器过期时不显示消息，而是直接执行 onshow 回调函数。
jsshowurl: "//browser-update.org/update.show.min.js",
// 用于显示提示的 js 文件地址。该文件仅在用户的浏览器的确过期时才会加载。
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"自定义通知文字 例如，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 |
更改样式
以下 CSS 样式规则会被应用在通知上。您可以使用您自己的 CSS 样式规则来覆盖它们。为了确保能正确覆盖您需要额外向您的样式规则添加一些选择器，例如：
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;
}