ping 域名

突然遇到這麼個需求，需要判斷是否內網環境。

這個問題，如果想通了就非常簡單。

嘗試一 ajax

一開始，我想到的是 ajax 訪問內網介面，不通就外網，通就內網。

這會有個小問題，需要伺服器加上跨域支援。

而且使用者瀏覽器可能也會有相容性問題。

所以放棄。

嘗試二 img 大法

這個是比較靠譜的方式，就是 img 載入內網圖片，如果成功，那就是內網，沒有相容性問題。

思路就是 new Image 然後載入內網ip的圖示，比如 ‘http://192.168.1.12/favicon.ico'。

[JavaScript] 純文字檢視 複製程式碼
const img = new Image();
img.onload = () => '是內網，執行相關程式碼';
img.onerror = () => '不是內網，執行相關程式碼';
img.src = 'http://192.168.1.12/favicon.ico?_=' + (+new Date());

但如果你的內網服務沒 favicon.ico，那 logo 總會有吧，或者其他任意圖片。

npm 模組

於是乎就寫了個模組 ping-host。

安裝：

[Shell] 純文字檢視 複製程式碼
$ yarn add ping-host
# 或
$ npm i -S ping-host

使用：

[JavaScript] 純文字檢視 複製程式碼
import ping from 'ping-host';

(async () => {
  await ping('taobao.com');
  await ping('github.com', 'fluidicon.png');
  await ping('github.com', 5000);
  await ping('github.com', 'fluidicon.png', 3000);
})();

或頁面直接引入：

[HTML] 純文字檢視 複製程式碼
<script src="https://unpkg.com/ping-host"></script>
<script>
(async () => {
  const ret = await ping('taobao.com');
})();

// 或
ping('taobao.com').then(ret => console.log(ret));
</script>

ping(host, image, timeout)

host: string, 域名或IP

image: 圖片，預設 favicon.ico

timeout: 超時(毫秒)，預設不限制

小結

很多時候都只差靈光一現，一些很 low 的技巧，也可以用出高大上的效果。