CHROME無法無法正常顯示下拉式選單內容

google chrome瀏覽器 google chrome 下拉式選單

CruiseChen 2021-01-04 14:18:29 ‧ 12423 瀏覽

分享至

我司客服因工作需求，需使到某網頁，該網頁會連結到Google MAP故以CHROME為設計基底，無法使用IE開啟，需使用CHROME開啟，我司部分電腦可以正常開啟，但部分電腦開啟該網頁後，下拉選單的內容卻是空白，網頁裡的下拉式選單內容無法顯示，我司電腦有加入網域，顯示異常的電腦登入其他帳號可能可以正常顯示（排除電腦問題），同一個帳號使用不同電腦有些電腦正常有些不正常（排除AD問題），將使用者加入本機Admin權限也是不能正常顯示（排除權限問題），使用FireFox瀏覽器結果會跟CHROME一樣（排除瀏覽器問題），使用無痕模式也無法正常顯示，移除CHROME重新安裝也一樣無法正常顯示，清除cookie清除歷程清除暫存檔也無法解決，加入安全性網頁或相容性網站也無法解決，移除防毒軟體也無法解決、想詢問各位大大，是否有其他解決的方向？
電腦硬體：ASUS D640MA（i5-9500/8G_RAM）
作業系統：Windows 10 Pro（1909、2004、20H2）
CHROME版本：87.0.4280.88（最新版）
JAVA版本：1.8.0_271-b09（最新版）
問題網址：https://distance-matrix-by-wells.herokuapp.com/

網頁異常顯示如下圖：

網頁正常顯示如下圖：

通靈亡 iT邦高手 1 級 ‧ 2021-01-04 14:23:50 檢舉

請問一下，你的下拉選單資料來源是寫死在網頁裡面，還是從別的地方來的？
如果是從別的地方來的，有可能因為來源被擋到所以沒資料。

CruiseChen iT邦新手 5 級 ‧ 2021-01-04 14:41:09 檢舉

該網站是米其林的服務網站，我不確定下拉選單的資料來源是不是寫在網頁裡，
我的邏輯是，我司同網段的電腦或者同一台電腦不同AD帳號，有些顯示正常，有些顯示不正常，倘若來源被防火牆或其他設備阻擋，我司所有電腦開啟該網站都會異常，所以我比較朝向是電腦設定問題

淺水員 iT邦大師 6 級 ‧ 2021-01-04 14:45:30 檢舉

根據給的網址，那是用 vue 寫的。然後高速公路的資料應該是 js 抓 json 來的。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

淺水員

iT邦大師 6 級 ‧ 2021-01-04 14:44:07

最佳解答

檢查確認

可能需要其他資訊才好判斷，可以參考下列步驟

chrome

先開一個新分頁，按 F12 會跑出開發工具。
輸入網址，進入網站。
看 console 標籤內，把訊息截圖並貼上來。
看 network 標籤內，把訊息截圖並貼上來。

firefox

同 chrome，只是標籤變中文的，對應關係如下
console => 主控台
network => 網路

猜測

有跑 proxy ，有些 js 是舊版本，或是根本找不到。
可以試試看讓電腦不要連公司網路，改連手機的分享；清除歷史紀錄後再進入網頁試試看。

回應 14
分享
檢舉

看更多先前的回應...收起先前的回應...

CruiseChen iT邦新手 5 級 ‧ 2021-01-04 15:13:46 檢舉

顯示正常與顯示異常的CHROME CONSOLE標籤內容，看起來有些差異，如果這些是異常的重點，有修正的方法嗎??

CHROME顯示異常CONSOLE標籤內容：

CHROME顯示正常CONSOLE標籤內容：

淺水員 iT邦大師 6 級 ‧ 2021-01-04 15:24:34 檢舉

的確是有幾個檔案連不到

也就是那幾台電腦連不到 cdnjs.cloudflare.com 的檔案
想辦法讓這幾台電腦能連到就好

結論：網站沒問題，電腦也沒問題，但是網路要檢查一下。

通靈亡 iT邦高手 1 級 ‧ 2021-01-04 15:32:38 檢舉

把淺水員上面三個其中一個的網址，貼到有問題的電腦瀏覽器上，將畫面截圖上來

CruiseChen iT邦新手 5 級 ‧ 2021-01-04 15:43:12 檢舉

三個都無法顯示網頁耶！

淺水員 iT邦大師 6 級 ‧ 2021-01-04 15:57:11 檢舉

不用檢查三個啦，只要檢查 https://cdnjs.cloudflare.com/ 就可以了。
不過關於網路連不到的問題我就比較難有什麼建議了，畢竟也不知道你們網路架構，還有那幾台電腦的網路是怎麼設定的。
也許可以搜尋看看「ERR_CONNECTION_RESET」這個錯誤訊息，先試著弄看看

CruiseChen iT邦新手 5 級 ‧ 2021-01-04 16:11:15 檢舉

不好意思，JS這方面我完全不懂，所以完全不知道怎麼做
這網址 (https://cdnjs.cloudflare.com/) 也是顯示無法連上這個網站

通靈亡 iT邦高手 1 級 ‧ 2021-01-04 16:12:05 檢舉

問一下連不到的瀏覽器畫面長什麼樣子？可以的話截圖放上來。

CruiseChen iT邦新手 5 級 ‧ 2021-01-04 16:17:42 檢舉

這網址 (https://cdnjs.cloudflare.com/) 也是顯示無法連上這個網站

淺水員 iT邦大師 6 級 ‧ 2021-01-04 16:31:43 檢舉

試試看關閉 proxy 吧
https://iqmore.tw/2019-cht-hinet-no-proxy-service-news

CruiseChen iT邦新手 5 級 ‧ 2021-01-04 16:54:27 檢舉

PROXY預設是開啟自動偵測設定
關閉PROXY後，該網頁一樣無法正常顯示下拉式選單內容
如果要使用外網做測試，公司電腦沒有無線網卡，所以我需要一些時間，但如上述我的邏輯是，我司同網段的電腦或者同一台電腦不同AD帳號，有些顯示正常，有些顯示不正常，倘若來源被防火牆或其他設備阻擋，我司所有電腦開啟該網站都會異常，所以我比較朝向是電腦設定問題

CruiseChen iT邦新手 5 級 ‧ 2021-01-05 09:10:24 檢舉

CHROME顯示異常NETWORK標籤內容：

CHROME顯示正常NETWORK標籤內容：

通靈亡 iT邦高手 1 級 ‧ 2021-01-05 09:50:53 檢舉

你現在的問題是卡在，那三支第三方Library的網址被擋住
而你的下拉選單資料，需透過其中一支第三方Library: axios 來存取

如果這支網頁程式是你們自己人開發的
可以將淺水員上方的那三個被擋住的 Library 網址，改用jsdelivr的 Library 的 CDN 網址

https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js

https://cdn.jsdelivr.net/npm/clipboard@1.7.1/dist/clipboard.min.js

archer9080 iT邦研究生 3 級 ‧ 2021-01-05 10:00:39 檢舉

該網站是米其林的服務網站

看起來應該不是自己人開發的

是不是能跟對方技術人員接洽，可能會比較快(?)

CruiseChen iT邦新手 5 級 ‧ 2021-01-05 11:00:31 檢舉

下圖內容應該是指連結不到資料，我會再朝向公司網路設備測試看看。

CHROME顯示異常NETWORK標籤內容：

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-01-04 14:44:23

你要不要在有問題的電腦上先f12查看一下原因。

或是用如下的連結
https://(你們的網址)/api/v1/freeways

直接跑看看是否有抓到其對應的json資料。
目前這樣子猜不是辦法。要先找出實際問題點。

我是偏向連結不到。

回應 3
分享
檢舉

CruiseChen iT邦新手 5 級 ‧ 2021-01-05 08:42:48 檢舉

我用 https://(你們的網址)/api/v1/freeways 顯示如下：
看起來有內容，但是下拉式選單一樣無法正常顯示。

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-05 10:36:11 檢舉

這樣的話，至少可以先排除連結不到的問題。
從淺水員那一篇你的回答來看。

其實答案也很明顯了。
認真來說只要檢查 https://cdnjs.cloudflare.com/ 這個連結的問題。

cloudflare 會有這樣的問題倒是不意外。
不過如果網站不是你們寫的，也沒辦法去換cdnjs的位置了

結論:如果網站是自已的，更換一下cdnjs的請求位置。或是直接下載回來在自已的機器上跑。
如果不是自已的....嗯....無解。

淺水員 iT邦大師 6 級 ‧ 2021-01-05 12:28:24 檢舉

提供一個暫時性的做法，這是用 chrome 的擴充套件來做到「網址替代」

安裝 Resource Override 擴充套件
開啟 Resource Override 的設定頁面。
設定替代的網址(參考下圖)。

在操作之前可以先測試 https://cdnjs.cloudflare.com/ 是否可以連得到，如果連得到的話，上述作法應該可行。如果連不到就再找其他 CDN 來源即可。

網址

From:
https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js
To:
https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js

From:
https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js
To:
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js

From:
https://cdn.jsdelivr.net/npm/clipboard@1.7.1/dist/clipboard.min.js
To:
https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js

登入發表回應