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

    • 地震
      地震
      2024-04-27,09:10│中央氣象署
      04/27 09:06花蓮縣近海發生規模4.6有感地震,最大震度花蓮縣太魯閣、宜蘭縣澳花4級。 more...
    • 濃霧
      濃霧
      2024-04-27,08:20│中央氣象署
      今(27)日金門及馬祖易有低雲或局部霧影響能見度,金門已出現能見度不足200公尺的現象,請注意。 more...
    • 道路封閉
      道路封閉
      2024-04-27,06:44│交通部公路局
      宜蘭縣 大同鄉 台7甲線 36k+700~36k+900。受損狀況/管制原因: 邊坡坍方落石。 預計封閉時間:2024-04-27 06:44:35 ~ 2024-04-27 12:00:00。 more...
    • 停水
      停水
      2024-04-02,15:02│台灣自來水公司
      南投縣埔里鎮蜈蚣里榮光路汰換管線工程(113年4月1日至4月30日週一至週六每日上午9時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 停水
      停水
      2024-04-02,15:01│台灣自來水公司
      南投縣埔里鎮蜈蚣里榮光路汰換管線工程(113年4月1日至4月30日週一至週六每日上午9時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 停水
      停水
      2024-04-02,14:54│台灣自來水公司
      南投縣桃米社區汰換管線工程(113年4月1日至4月30日週一至週六每日上午9時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 停水
      停水
      2024-04-02,14:55│台灣自來水公司
      南投縣桃米社區汰換管線工程(113年4月1日至4月30日週一至週六每日上午9時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 停水
      停水
      2024-04-02,14:45│台灣自來水公司
      埔里鎮中山路南昌街等汰換管線工程(113年4月1日至4月30日週一至週六每日上午8時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 停水
      停水
      2024-04-02,14:44│台灣自來水公司
      埔里鎮中山路南昌街等汰換管線工程(113年4月1日至4月30日週一至週六每日上午8時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 停水
      停水
      2024-04-02,14:41│台灣自來水公司
      埔里鎮中山路南昌街等汰換管線工程(113年4月1日至4月30日週一至週六每日上午8時至下午19時施工停水,遇雨順延、國定假日及例假日不施工,分段施工、分段停水、夜間恢復供水,請用戶利用晚上儲水備用) more...
    • 枯旱預警
      枯旱預警
      2024-03-19,15:21│水利署
      113年3月19日供水情勢(枯旱預警)通報 影響地區:桃園市、新竹縣(市)、苗栗縣、台中市 more...
    • 道路封閉
      道路封閉
      2004-07-02,07:00│交通部公路局
      臺中市 和平區 台8臨37線 0k+000~24k+000。受損狀況/管制原因: 台8臨37線0k~24k上谷關至德基路段,屬中橫便道上線,因93年敏督利颱風影響,道路中斷至今,每日開放3... more...
    • 道路封閉
      道路封閉
      2024-01-01,07:00│交通部公路局
      南投縣 信義鄉 台16臨29線 0k+000~11k+834。受損狀況/管制原因: 因0602地震、豪大雨、蘇力、康芮、潭美等颱風災害影響,造成沿線邊坡不穩定,且不時仍有零星落石,邊坡... more...
    • 道路封閉
      道路封閉
      2022-10-12,07:00│交通部公路局
      桃園市 復興區 台7線 49k+000~50k+000。受損狀況/管制原因: 北橫公路台7線49.7K大曼路段,前於去(111)年10月份受尼莎颱風環流及東北季風共伴連續強降雨影響,造成... more...
    • 道路封閉
      道路封閉
      2022-08-11,10:00│交通部公路局
      高雄市 桃源區 台20臨105線 0k+000~36k+828。受損狀況/管制原因: 因山區易發生零星落石,且降雨時易起濃霧等潛在危害因素需進行(週二、四)道路維護及常態性夜間管制。 預計封閉時間:2022-08-11 10:00:00 ~ 2024-12-31 17:00:00。 more...
    • 道路封閉
      道路封閉
      2023-12-31,07:00│交通部公路局
      南投縣 信義鄉 台21線 110k+000~144k+385。受損狀況/管制原因: 南投縣信義鄉新中橫公路台21線110K~144.385K(草坪頭~塔塔加路段)目前因101年度颱風豪雨災害、102年... more...
    • 道路封閉
      道路封閉
      1970-01-01,08:00│交通部公路局
      臺東縣 海端鄉 台20臨105線 36k+829~44k+000。受損狀況/管制原因: 0513豪雨災害導致邊坡路基易受水文地質不穩定影響,有突發零星落石機率等及下午易起霧潛在危害... more...
    • 海洋污染
      海洋污染
      2023-12-19,09:11│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:連江縣本國籍「順利」雜貨船進水案 more...
    • 海洋污染
      海洋污染
      2023-12-17,12:10│海洋保育署
      地方政府澎湖縣政府環境保護局:喀麥隆籍HAI SHOU海順貨船擱淺案 more...
    • 海洋污染
      海洋污染
      2023-12-06,15:20│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:(連江縣)東莒猛澳港「駿逸2號」平台船沉沒案 more...
    • 海洋污染
      海洋污染
      2023-12-12,12:12│海洋保育署
      地方政府宜蘭縣政府環境保護局:大里海蝕平台油污事件 more...
    • 海洋污染
      海洋污染
      2023-12-11,08:30│海洋保育署
      地方政府花蓮縣政府環境保護局:能豐2號漁船沉船 more...
    • 海洋污染
      海洋污染
      2023-12-11,14:00│海洋保育署
      地方政府新北市政府環境保護局:金山區油污事件 more...
    • 海洋污染
      海洋污染
      2023-12-07,10:35│海洋保育署
      地方政府新北市政府環境保護局:新北市東北角油污事件 more...
    • 海洋污染
      海洋污染
      2023-12-07,16:30│海洋保育署
      地方政府基隆市政府環境保護局:長潭里污染事件 more...
    • 海洋污染
      海洋污染
      2023-12-05,16:30│海洋保育署
      地方政府新北市政府環境保護局:1121205 瑞芳區鼻頭角公園油污事件 more...
    • 海洋污染
      海洋污染
      2023-12-04,12:06│海洋保育署
      地方政府新北市政府環境保護局:1121204 貢寮區九孔池油污事件 more...
    • 海洋污染
      海洋污染
      2023-12-04,19:00│海洋保育署
      地方政府屏東縣政府環境保護局:岸際不明油污 more...
    • 海洋污染
      海洋污染
      2023-12-01,00:00│海洋保育署
      地方政府台東縣政府環境保護局:綠島柚子湖潮間帶油污 more...
    • 海洋污染
      海洋污染
      2023-11-30,12:55│海洋保育署
      地方政府澎湖縣政府環境保護局:瓦硐漁船失火事件 more...
    • 海洋污染
      海洋污染
      2023-11-23,07:40│海洋保育署
      地方政府高雄市政府海洋局:高雄港119號碼頭水域出現不明油污案 more...
    • 海洋污染
      海洋污染
      2023-11-14,16:30│海洋保育署
      地方政府澎湖縣政府環境保護局:望安潭門港漁船金玉財失火翻覆漏油案 more...
    • 海洋污染
      海洋污染
      2023-11-14,15:40│海洋保育署
      地方政府屏東縣政府環境保護局:枋寮漁港岸際油桶油污洩漏 more...
    • 鐵路事故
      鐵路事故
      2022-06-20,12:43│臺鐵公司
      [天然災變]:[集集-水里] 受 天然 災害影響,臺鐵自 110年8月26日04:40 起 集集站至水里站間目前路線中斷,集集至車埕間以公路接駁,南下/北上列車有延誤情形,敬請見諒! more...
    • 海洋污染
      海洋污染
      2023-10-25,09:00│海洋保育署
      地方政府新北市政府環境保護局:淡水第二漁港興複發沈船事件 more...
    • 海洋污染
      海洋污染
      2023-10-24,18:35│海洋保育署
      地方政府苗栗縣政府環境保護局:外埔漁港外海1公里處漁船擱淺 more...
    • 海洋污染
      海洋污染
      2023-10-07,11:58│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:第十三(澎湖)巡防區「白沙之星」交通船擱淺案 more...
    • 海洋污染
      海洋污染
      2023-10-01,17:04│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:雲林縣許厝寮「榮富」無動力工作平台擱淺案 more...
    • 海洋污染
      海洋污染
      2023-10-16,13:25│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:中國大陸籍小型貨輪越界擱淺於馬祖西引岸際案 more...
    • 海洋污染
      海洋污染
      2023-10-18,07:00│海洋保育署
      地方政府新北市政府環境保護局:1121018萬里漁港銀豐號沈船事件 more...
    • 海洋污染
      海洋污染
      2023-10-06,06:40│海洋保育署
      地方政府連江縣政府環境資源局:蒙古籍「WIN 198」貨輪進水 more...
    • 海洋污染
      海洋污染
      2023-10-06,14:30│海洋保育署
      地方政府花蓮縣政府環境保護局:花蓮石堤漁港作業砂石車翻覆港內 more...
    • 海洋污染
      海洋污染
      2023-10-05,12:51│海洋保育署
      地方政府台東縣政府環境保護局:蘭嶼開元港船隻翻覆及沉沒 more...
    • 海洋污染
      海洋污染
      2023-10-05,15:04│海洋保育署
      地方政府桃園市政府海岸管理工程處:東坪9號流錨、東坪15號座底 more...
    • 海洋污染
      海洋污染
      2023-10-05,10:15│海洋保育署
      地方政府新北市政府環境保護局:1121005林口區水牛坑岸際海岸2號擱淺事件 more...
    • 海洋污染
      海洋污染
      2023-10-03,04:30│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:金門發現廢棄不明漂流船擱淺案 more...
    • 海洋污染
      海洋污染
      2023-09-03,16:30│海洋保育署
      地方政府新竹市政府環境保護局:金福順36號火燒船事件(測試) more...
    • 海洋污染
      海洋污染
      2023-09-03,16:30│海洋保育署
      地方政府新竹市政府環境保護局:金福順36號火燒船事件(測試) more...
    • 海洋污染
      海洋污染
      2023-09-06,06:50│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:金門發現木質漂流船擱淺案 more...
    • 海洋污染
      海洋污染
      2023-09-21,14:00│海洋保育署
      地方政府新北市政府環境保護局:萬里漁港船隻維修區船底漆散佈 more...
    • 海洋污染
      海洋污染
      2023-09-27,13:00│海洋保育署
      地方政府高雄市政府海洋局:屏東籍兆豐號漁船(CT5--1730)失火案 more...
    • 海洋污染
      海洋污染
      2023-09-28,16:00│海洋保育署
      地方政府屏東縣政府環境保護局:兆豐CT5-1730火燒船 more...
    • 海洋污染
      海洋污染
      2023-09-28,16:00│海洋保育署
      地方政府屏東縣政府環境保護局:兆豐CT5-1730火燒-拖回鹽埔漁港 more...
    • 海洋污染
      海洋污染
      2023-08-27,14:20│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:高雄港第一船渠「南海2號」遊艇沉沒案 more...
    • 海洋污染
      海洋污染
      2023-08-27,15:56│海洋保育署
      海洋委員會海洋保育署海洋環境管理組:澎湖外垵海域發現1艘半沉船舶案 more...
    • 海洋污染
      海洋污染
      2023-09-04,08:18│海洋保育署
      地方政府台東縣政府環境保護局:東河工作平台擱淺 more...
    • 海洋污染
      海洋污染
      2023-09-04,09:29│海洋保育署
      地方政府台東縣政府環境保護局:小港籍慶昌號(CTR TT0935)翻覆 more...
    • 海洋污染
      海洋污染
      2023-09-05,09:30│海洋保育署
      地方政府金門縣政府環境保護局:料羅商港油污染事件 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 畫面

    • 道路封閉
      2024-04-27,06:44
      宜蘭縣 大同鄉 台7甲線 36k+700~36k+900。受損狀況/管... more...
    • 道路封閉
      2004-07-02,07:00
      臺中市 和平區 台8臨37線 0k+000~24k+000。受損狀況/... more...
    • 道路封閉
      2024-01-01,07:00
      南投縣 信義鄉 台16臨29線 0k+000~11k+834。受損狀況... more...
    • 道路封閉
      2022-10-12,07:00
      桃園市 復興區 台7線 49k+000~50k+000。受損狀況/管制... more...
    • 道路封閉
      2022-08-11,10:00
      高雄市 桃源區 台20臨105線 0k+000~36k+828。受損狀況... more...
    • 道路封閉
      2023-12-31,07:00
      南投縣 信義鄉 台21線 110k+000~144k+385。受損狀況/... more...
    • 道路封閉
      1970-01-01,08:00
      臺東縣 海端鄉 台20臨105線 36k+829~44k+000。受損狀... more...
  • 一般示警(縣市別)元件介接範例
    一般示警(縣市別)元件介接範例程式:
    <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 畫面

    • 道路封閉
      2016-10-03,18:00
      台東縣 關山鎮 台20線168K+100~168K+150,因 路基流失災害封閉。 災... 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 畫面

    • * 道路封閉
      台東縣 關山鎮 台20線168K+100~168K+150,因 more...
      2016-10-03,18:00 │ 交通部公路總局