Browser-Update.org

自定义与测试

测试脚本

如果您打开的网页的链接末尾带有 <code>#test-bu</code> ，那么通知条会一直生成。例如： <code>http://browser-update.org/#test-bu</code>。请在新的标签页中打开该网址以保证网页被正确地重新加载。

选项

以下选项可以递交给脚本：

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // Specifies required browser versions
    // Browsers older than this will be notified.
    // f:22 ---> Firefox < 22 gets notified
    // Negative numbers specify how much versions behind current version.
    // c:-5 ---> Chrome < 35  gets notified if latest Chrome version is 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}) 已过期：&lt;a{up_but}&gt;更新浏览器&lt;/a&gt; &lt;a{ignore_but}&gt;忽略&lt;/a&gt;。

    text_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
    // Do not give the user the option to permanently hide the notification

    api: xxx
    // 这是browser-update的API所使用的版本。请不要移除。

};

更改样式

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