『您的瀏覽器不支援JavaScript功能,若網頁功能無法正常使用時,請開啟瀏覽器JavaScript狀態』
imgevent

跳到主要內容區塊 :::

:::

示警元件

何謂示警元件?

示警元件是以JavaScript元件庫的方式進行設計,可提供各網站開發者掛載,以顯示本平台所提供的最新示警訊息,元件本身提供低限度的自訂方式,讓使用者選擇元件版型、預設底色作為搭配選擇。

常見問題
  • Big-5網頁出現亂碼解決方案 示警元件採用Unicode編碼,若您的網頁使用big-5編碼,則容易出現亂碼,建議解決方式如下:
    1. 1.不要將示警元件直接引用於big-5編碼之網站頁面。
    2. 2.另行編輯UTF-8之html檔,並儲存於對外網路空間。
    3. 3.以iframe方式存取上步驟之HTML對外網址。
使用說明
  • 使用方式 建立一個網頁資源檔案(.htm、.html),<head> </head> 內引入示警元件的資源檔案(Javascrit資源檔),然後在<body> </body>網頁區塊內建立一個<div> </div>區塊,給予該div一個有命名規則的ID,此ID將影響你在網頁上呈現的大小以及的示警類類別的選擇。
  • 版面說明 示警元件1.0版提供5種寬、高版面規格:300 X 100、300 X 250、180 X 110、180 X 155、180 X 350。
  • 類型說明 「共通示警協議標準」中定義嚴重代碼程度區分為5種嚴重程度等級,包括:
    1. Extreme(非常嚴重的威脅)
    2. Severe(嚴重的威脅)
    3. Moderate(有威脅)
    4. Minor(很小的威脅)
    5. Unknown(未知)
    示警元件1.0版由前述5種嚴重程度區分為以下2種類型,並提供全台灣、各縣市2種不同地域性質的示警訊息。
    1. 一般示警:包含嚴重代碼為Extreme、Severe、Moderate、Minor、Unknown等全台灣的示警訊息。
    2. 高嚴重示警:包含嚴重代碼為Extreme等全台灣的示警訊息。
  • 版面、類型命名規則 不同的版面指派給 <div> </div>區塊的ID也不一樣,參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則也不一樣,請參照以下規則:
    1. 一般示警(全台灣):
      <div> </div>區塊的ID命名規則為capInfo300250,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CAP300250_CapInfo.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。
    2. 高嚴重示警(全台灣):
      <div> </div>區塊的ID命名規則為capInfo300250_Extreme,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoExtreme_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。
    3. 一般示警(縣市別):
      <div> </div>區塊的ID命名規則為capInfo300250_Normal_66,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoNormal_66_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。66為縣市代碼(代碼說明表)
    4. 高嚴重示警(縣市別):
      <div> </div>區塊的ID命名規則為capInfo300250_Extreme_66,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoExtreme_66_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。66為縣市代碼(代碼說明表)
  • 樣式說明 示警元件會依照情境顯示不同之底色,說明如下:
    平時無示警狀態→底色顯示綠色。
    無示警狀態
    平時有示警狀態→底色顯示黃色。
    有示警狀態
    正值災害應變期間→底色顯示紅色。
    災害應變期間
元件參照表
一般示警 高嚴重示警
300X100 全台灣
script CAP300100_CapInfo.js
DIV capInfo300100
台北市
script CapInfoNormal_63_300100.js
DIV capInfo300100_Normal_63
全台灣
script CapInfoExtreme_300100.js
DIV capInfo300100_Extreme
台北市
script CapInfoExtreme_63_300100.js
DIV capInfo300100_Extreme_63
300X250 全台灣
script CAP300250_CapInfo.js
DIV capInfo300250
台北市
script CapInfoNormal_63_300250.js
DIV capInfo300250_Normal_63
全台灣
script CapInfoExtreme_300250.js
DIV capInfo300250_Extreme
台北市
script CapInfoExtreme_63_300250.js
DIV capInfo300250_Extreme_63
180X110 全台灣
script CAP180110_CapInfo.js
DIV capInfo180110
台北市
script CapInfoNormal_63_180110.js
DIV capInfo180110_Normal_63
全台灣
script CapInfoExtreme_180110.js
DIV capInfo180110_Extreme
台北市
script CapInfoExtreme_63_180110.js
DIV capInfo180110_Extreme_63
180X155 全台灣
script CAP180155_CapInfo.js
DIV capInfo180155
台北市
script CapInfoNormal_63_180155.js
DIV capInfo180155_Normal_63
全台灣
script CapInfoExtreme_180155.js
DIV capInfo180155_Extreme
台北市
script CapInfoExtreme_63_180155.js
DIV capInfo180155_Extreme_63
180X350 全台灣
script CAP180350_CapInfo.js
DIV capInfo180350
台北市
script CapInfoNormal_63_180350.js
DIV capInfo180350_Normal_63
全台灣
script CapInfoExtreme_180350.js
DIV capInfo180350_Extreme
台北市
script CapInfoExtreme_63_180350.js
DIV capInfo180350_Extreme_63
縣市名 縣市代碼
連江縣 09007
金門縣 09020
宜蘭縣 10002
彰化縣 10007
南投縣 10008
雲林縣 10009
屏東縣 10013
臺東縣 10014
花蓮縣 10015
澎湖縣 10016
基隆市 10017
新竹市 10018
臺北市 63
新北市 65
臺中市 66
臺南市 67
桃園市 68
苗栗縣 10005
新竹縣 10004
嘉義市 10020
嘉義縣 10010
高雄市 64

範例
  • 一般示警(全台灣)元件介接範例
    一般示警(全台灣)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CAP300250_CapInfo.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CAP300250_CapInfo.js"></script>
      </head>
      <body>
       <div id="capInfo300250" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • 海洋污染
      海洋污染
      2022-05-12,12:10│海洋保育署
      地方政府基隆市政府環境保護局:1110512長潭里漁港漁船碰撞漏油事件 more...
    • 海洋污染
      海洋污染
      2022-05-12,17:16│海洋保育署
      地方政府澎湖縣政府環境保護局:鎖港漁具倉庫前方港口 more...
    • 海洋污染
      海洋污染
      2022-05-12,12:10│海洋保育署
      地方政府基隆市政府環境保護局:1110512長潭里漁港漁船碰撞漏油事件 more...
    • 海洋污染
      海洋污染
      2022-05-04,09:46│海洋保育署
      地方政府澎湖縣政府環境保護局:尖山輸油碼頭油花 more...
    • 海洋污染
      海洋污染
      2022-05-03,15:10│海洋保育署
      地方政府屏東縣政府環境保護局:恆春鎮興海漁港漁船不明廢油傾倒案 more...
    • 鐵路事故
      鐵路事故
      2022-01-03,16:30│臺灣鐵路管理局
      路線障礙:受路線故障災害影響,集集站至車埕站間目前路線暫時不通,南下/北上列車有延誤情形,敬請見諒! more...
    • 海洋污染
      海洋污染
      2022-04-26,06:43│海洋保育署
      地方政府台東縣政府環境保護局:大發一號雜貨船與LIA油輪碰撞案 more...
    • 海洋污染
      海洋污染
      2022-04-20,12:10│海洋保育署
      地方政府台南市政府環境保護局:安平商港船舶漏油事件 more...
    • 海洋污染
      海洋污染
      2022-04-15,00:57│海洋保育署
      地方政府彰化縣政府環境保護局:警戒船KORUYU擱淺 more...
    • 海洋污染
      海洋污染
      2022-04-14,14:14│海洋保育署
      地方政府彰化縣政府環境保護局:諾魯籍漁船HOUKAI MARU主機故障 more...
    • 海洋污染
      海洋污染
      2022-04-13,10:20│海洋保育署
      地方政府屏東縣政府環境保護局:旭海觀音鼻自然保留區外海漁船筏翻覆事件 more...
    • 海洋污染
      海洋污染
      2022-03-29,11:25│海洋保育署
      地方政府連江縣政府環境資源局:中國大陸籍「全順發」貨輪進水,海面發現油污 more...
    • 海洋污染
      海洋污染
      2022-03-27,13:20│海洋保育署
      地方政府金門縣政府環境保護局:料羅港油污事件 more...
    • 海洋污染
      海洋污染
      2022-03-24,17:50│海洋保育署
      地方政府宜蘭縣政府環境保護局:永吉利16號漁船於烏石港漏油事件 more...
    • 海洋污染
      海洋污染
      2022-03-19,09:18│海洋保育署
      地方政府花蓮縣政府環境保護局:接獲民眾通報花蓮溪出海口疑似有油污 more...
    • 海洋污染
      海洋污染
      2022-03-18,09:20│海洋保育署
      地方政府新竹縣政府環境保護局:新竹縣坡頭漁港 more...
    • 海洋污染
      海洋污染
      2022-03-15,11:00│海洋保育署
      地方政府花蓮縣政府環境保護局:花蓮漁港港內不明油污 more...
    • 海洋污染
      海洋污染
      2022-03-08,09:56│海洋保育署
      地方政府台東縣政府環境保護局:貨輪擱淺富岡漁港外海提處 more...
    • 海洋污染
      海洋污染
      2022-03-06,09:00│海洋保育署
      地方政府金門縣政府環境保護局:塔山電廠棧橋碼頭油污陳情案 more...
    • 海洋污染
      海洋污染
      2022-02-06,14:00│海洋保育署
      地方政府金門縣政府環境保護局:金門大橋大金端「國登8號」擱淺案 more...
    • 海洋污染
      海洋污染
      2022-01-29,19:05│海洋保育署
      地方政府新北市政府環境保護局:石門草里漁港外CT4-1825春吉8漁船翻覆事件 more...
    • 海洋污染
      海洋污染
      2022-01-10,18:30│海洋保育署
      地方政府新北市政府環境保護局:金山燭台沙灘CTS-7648港灣二號漁船擱淺事件 more...
    • 海洋污染
      海洋污染
      2022-01-18,08:00│海洋保育署
      地方政府金門縣政府環境保護局:翟山外海工作平台船翻覆 more...
    • 海洋污染
      海洋污染
      2021-12-21,16:00│海洋保育署
      地方政府新竹縣政府環境保護局:金龍吉1號船隻擱淺 more...
    • 海洋污染
      海洋污染
      2021-12-18,08:00│海洋保育署
      地方政府金門縣政府環境保護局:金寧鄉北山海岸發現疑似陸籍工作平台船擱淺 more...
    • 海洋污染
      海洋污染
      2021-12-18,08:00│海洋保育署
      地方政府金門縣政府環境保護局:金寧鄉北山海岸發現疑似陸籍工作平台擱淺 more...
    • 海洋污染
      海洋污染
      2022-01-10,18:30│海洋保育署
      地方政府新北市政府環境保護局:金山燭台沙灘CTS-7648港灣二號漁船擱淺事件 more...
    • 海洋污染
      海洋污染
      2021-11-29,10:30│海洋保育署
      地方政府台南市政府環境保護局:將軍漁港不明來源油污應變事件 more...
    • 海洋污染
      海洋污染
      2021-07-31,17:24│海洋保育署
      地方政府金門縣政府環境保護局:大山輪烏坵擱淺事件 more...
    • 海洋污染
      海洋污染
      2021-10-28,17:20│海洋保育署
      地方政府彰化縣政府環境保護局:獅子山籍貨輪LUCKY號船舶進水、船身傾斜案通報 more...
    • 海洋污染
      海洋污染
      2021-12-13,02:36│海洋保育署
      地方政府澎湖縣政府環境保護局:韓國籍「JAEWON9」拖帶船「DONG JI NO.2」平台船斷纜擱淺案 more...
    • 海洋污染
      海洋污染
      2021-10-17,12:30│海洋保育署
      地方政府澎湖縣政府環境保護局:巴拿馬籍FORTUNE貨輪於吉貝嶼外海漂流事件 more...
    • 海洋污染
      海洋污染
      2021-12-21,16:00│海洋保育署
      地方政府新竹縣政府環境保護局:金龍吉1號船隻擱淺 more...
  • 高嚴重示警(全台灣)元件介接範例
    高嚴重示警(全台灣)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_180110.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_180110.js"></script>
      </head>
      <body>
       <div id="capInfo180110_Extreme" >
       </div>
      </body>
    </html>

    DEMO 畫面

  • 一般示警(縣市別)元件介接範例
    一般示警(縣市別)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoNormal_66_180155.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoNormal_66_180155.js"></script>
      </head>
      <body>
       <div id="capInfo180155_Normal_66" >
       </div>
      </body>
    </html>

    DEMO 畫面

  • 高嚴重示警(縣市別)元件介接範例
    高嚴重示警(縣市別)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_66_300100.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_66_300100.js"></script>
      </head>
      <body>
       <div id="capInfo300100_Extreme_66" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • * 現無示警
      現在沒有示警。 more...
      2022-05-18,10:34 │ 更新