『您的瀏覽器不支援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 畫面

    • 道路施工
      道路施工
      2021-12-06,18:01│臺中市政府建設局
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:大誠街120巷(37號前) more...
    • 降雨
      降雨
      2021-12-06,15:30│中央氣象局
      東北風影響,今(6)日基隆北海岸、宜蘭地區及大臺北山區有局部大雨發生的機率,請注意瞬間大雨及溪水暴漲。 more...
    • 強風
      強風
      2021-12-06,15:05│中央氣象局
      東北風增強,明(7)日桃園至雲林、東南部(含蘭嶼、綠島)、恆春半島沿海空曠地區及澎湖、金門、馬祖將有9至10級強陣風,北部、嘉義、臺南、東北部、東部沿海空曠地區亦有較... more...
    • 道路施工
      道路施工
      2021-12-06,14:31│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:興大路(420號) more...
    • 道路施工
      道路施工
      2021-12-06,14:21│臺中市政府建設局
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:平等街(109號前) more...
    • 道路施工
      道路施工
      2021-12-06,13:41│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:中興嶺(68號) more...
    • 道路施工
      道路施工
      2021-12-06,13:21│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:仁禮街(33號前) more...
    • 道路施工
      道路施工
      2021-12-06,12:31│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:環中路一段(與崇德路三段口) more...
    • 道路施工
      道路施工
      2021-12-06,10:01│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:環中路一段(1566之1號對面) more...
    • 道路施工
      道路施工
      2021-12-06,09:51│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:大墩十七街(110號) more...
    • 道路施工
      道路施工
      2021-12-06,09:31│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:豐樂一街(18號對面) more...
    • 道路施工
      道路施工
      2021-12-06,09:11│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:五光路(144-3號) more...
    • 道路施工
      道路施工
      2021-12-06,09:01│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:十甲東路(246號) more...
    • 道路施工
      道路施工
      2021-12-06,08:51│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:金德街(9號前) more...
    • 道路施工
      道路施工
      2021-12-06,08:41│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:台灣大道一段(46號) more...
    • 道路施工
      道路施工
      2021-12-06,08:11│臺中市政府建設局
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:西屯路一段(西屯路1段351-7號一帶) more...
    • 道路施工
      道路施工
      2021-12-06,08:11│臺中市政府建設局
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:瀋陽路3段175號(一帶) more...
    • 火災
      火災
      2021-12-06,05:06│內政部消防署
      火災-一般(集合)住宅 more...
    • 火災
      火災
      2021-12-05,19:46│內政部消防署
      火災 more...
    • 道路施工
      道路施工
      2021-12-05,17:11│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:松竹路三段(與環中路一段口) more...
    • 道路施工
      道路施工
      2021-12-05,14:11│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:仁和路248巷(1號) more...
    • 道路施工
      道路施工
      2021-12-04,13:41│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:瑞光街(9號) more...
    • 道路施工
      道路施工
      2021-12-04,13:31│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:光興路(1152巷35號) more...
    • 道路施工
      道路施工
      2021-12-04,09:21│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:四維街(與仁禮街交叉口) more...
    • 道路施工
      道路施工
      2021-12-04,09:11│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:東興路(426號) more...
    • 道路施工
      道路施工
      2021-12-04,09:01│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:南屯路一段(大勇國小守衛室對面) more...
    • 道路施工
      道路施工
      2021-12-04,08:51│臺中市政府建設局
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:雙十路二段(48巷17號) more...
    • 道路施工
      道路施工
      2021-12-04,00:01│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:華中街(與美德街口) more...
    • 道路施工
      道路施工
      2021-12-04,00:01│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:大豐路三段(9號對面) more...
    • 道路施工
      道路施工
      2021-12-04,00:01│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:中清東路(與中清東路118巷口) more...
    • 道路施工
      道路施工
      2021-12-04,00:01│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:華富街(102號前) more...
    • 道路施工
      道路施工
      2021-12-04,00:01│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:河北路三段(河北二街~河北三街) more...
    • 道路施工
      道路施工
      2021-12-04,00:01│臺中市政府建設局
      孔蓋異常,恐影響民眾安危。施工地點:中清東路(與中清東路118巷口) more...
    • 海洋污染
      海洋污染
      2021-11-29,10:30│海洋保育署
      地方政府台南市政府環境保護局:將軍漁港不明來源油污應變事件 more...
    • 海洋污染
      海洋污染
      2021-11-25,21:10│海洋保育署
      地方政府新竹市政府環境保護局:遊艇「飛樂比」失去動力 more...
    • 海洋污染
      海洋污染
      2021-11-07,09:00│海洋保育署
      地方政府新北市政府環境保護局:林口下福里0.6海浬處舢舨漁船翻覆事件 more...
    • 海洋污染
      海洋污染
      2021-11-05,21:00│海洋保育署
      地方政府屏東縣政府環境保護局:鹽埔漁港油污染案 more...
    • 鐵路事故
      鐵路事故
      2021-08-27,07:21│臺灣鐵路管理局
      路線障礙:受路線故障災害之影響,臺鐵局自26日04:40起,集集站至車埕站間目前路線暫時不通,改以公路客運接駁,因公路易受塞車等路況影響,若導致列車到開延誤,敬請見諒! more...
    • 海洋污染
      海洋污染
      2021-10-17,12:30│海洋保育署
      地方政府澎湖縣政府環境保護局:巴拿馬籍FORTUNE貨輪於吉貝嶼外海漂流事件 more...
    • 海洋污染
      海洋污染
      2021-10-24,16:36│海洋保育署
      地方政府桃園市政府海岸管理工程處:10/24桃煉廠巡視發現1號浮筒A串浮蛇管漏油 more...
    • 海洋污染
      海洋污染
      2021-10-28,17:20│海洋保育署
      地方政府彰化縣政府環境保護局:獅子山籍貨輪LUCKY號船舶進水、船身傾斜案通報 more...
    • 道路封閉
      道路封閉
      2021-08-06,08:00│交通部公路總局
      高雄市 桃源區 台20線 105K+170~130K+200 預警性管制。管制路段已於8月6日上午8時實施預警性封閉,原配合明霸克露橋橋面受損修復作業預計8月27日上午8時解除,經... 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 畫面

    • 道路施工
      2021-12-06,18:01
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:大誠街120巷(37號前) more...
    • 強風
      2021-12-06,15:05
      東北風增強,明(7)日桃園至雲林、東南部(含蘭嶼、綠島... more...
    • 道路施工
      2021-12-06,14:31
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:興大路(420號) more...
    • 道路施工
      2021-12-06,14:21
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:平等街(109號前) more...
    • 道路施工
      2021-12-06,13:41
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:中興嶺(68號) more...
    • 道路施工
      2021-12-06,13:21
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:仁禮街(33號前) more...
    • 道路施工
      2021-12-06,12:31
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:環中路一段(與崇德路三段口) more...
    • 道路施工
      2021-12-06,10:01
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:環中路一段(1566之1號對面) more...
    • 道路施工
      2021-12-06,09:51
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:大墩十七街(110號) more...
    • 道路施工
      2021-12-06,09:31
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:豐樂一街(18號對面) more...
    • 道路施工
      2021-12-06,09:11
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:五光路(144-3號) more...
    • 道路施工
      2021-12-06,09:01
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:十甲東路(246號) more...
    • 道路施工
      2021-12-06,08:51
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:金德街(9號前) more...
    • 道路施工
      2021-12-06,08:41
      孔蓋異常,恐影響民眾安危。施工地點:台灣大道一段(46號) more...
    • 道路施工
      2021-12-06,08:11
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:西屯路一段(西屯路1段351-7號一帶) more...
    • 道路施工
      2021-12-06,08:11
      現場通報有瓦斯味道、設備損壞或用戶供氣中斷。施工地點:瀋陽路3段175號(一帶) more...
    • 道路施工
      2021-12-05,17:11
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:松竹路三段(與環中路一段口) more...
    • 道路施工
      2021-12-05,14:11
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:仁和路248巷(1號) more...
    • 道路施工
      2021-12-04,13:41
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:瑞光街(9號) more...
    • 道路施工
      2021-12-04,13:31
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:光興路(1152巷35號) more...
    • 道路施工
      2021-12-04,09:21
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:四維街(與仁禮街交叉口) more...
    • 道路施工
      2021-12-04,09:11
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:東興路(426號) more...
    • 道路施工
      2021-12-04,09:01
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:南屯路一段(大勇國小守衛室對面) more...
    • 道路施工
      2021-12-04,08:51
      地下漏水、路面漏水、路面下陷、既有用戶無水處理。施工地點:雙十路二段(48巷17號) more...
    • 道路施工
      2021-12-04,00:01
      孔蓋異常,恐影響民眾安危。施工地點:華中街(與美德街口) more...
    • 道路施工
      2021-12-04,00:01
      孔蓋異常,恐影響民眾安危。施工地點:大豐路三段(9號對面) more...
    • 道路施工
      2021-12-04,00:01
      孔蓋異常,恐影響民眾安危。施工地點:中清東路(與中清東路118巷口) more...
    • 道路施工
      2021-12-04,00:01
      孔蓋異常,恐影響民眾安危。施工地點:華富街(102號前) more...
    • 道路施工
      2021-12-04,00:01
      孔蓋異常,恐影響民眾安危。施工地點:河北路三段(河北二街~河北三街) more...
    • 道路施工
      2021-12-04,00:01
      孔蓋異常,恐影響民眾安危。施工地點:中清東路(與中清東路118巷口) more...
  • 高嚴重示警(縣市別)元件介接範例
    高嚴重示警(縣市別)元件介接範例程式:
    <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...
      2021-12-06,18:54 │ 更新