Browser-Update.org

사용자가 웹 브라우저를 업데이트하도록 알려주는 웹사이트들의 운동

사용자 정의 및 테스트

스크립트 테스트

웹 사이트를 열 때 URL에 #test-bu를 덧붙이면 항상 알림을 표시합니다. 예: http://browser-update.org/#test-bu. 새 브라우저 탭으로 URL을 열어서 페이지가 올바르게 새로 고쳐졌는지 확인하십시오. 자세한 정보(영어)

옵션

스크립트의 옵션은 다음과 같습니다:

$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,
    // 메시지의 고정 언어 설정. 예: "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,
    // 알림을 클릭한 다음에 이동할 URL

    noclose:false,
    // 알림을 닫는 "무시" 단추 표시하지 않기

    nomessage: false,
    // 웹 브라우저가 오래되었다는 메시지를 표시하지 않고 onshow 콜백 함수만 호출하기

    jsshowurl: "//browser-update.org/update.show.min.js",
    // 알림을 표시하는 스크립트가 위치한 URL입니다. 사용자가 실제로 오래된 브라우저를 사용했을 때에만 불러옵니다.

    container: document.body,
    // 알림 정보를 삽입할 DOM Element입니다.

    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에서 재정의할 수 있으며, 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;
    }