Browser-Update.org

网页设计师的倡议:告知用户更新浏览器

自定义与测试

测试脚本

如果您打开的网页的链接末尾带有 #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
nostatistics For every 1000th visitor anonymous statistics on the used browser are collected.
Turns off sending anonymous statistics.
true, false false boolean

更改样式

以下 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;
    }