同事分享,這幾天踩到 Chrome/Edge 升級 131 版的雷。

古蹟系統有段用 innerHTML 動態更新 <select> 選項的網頁,在 Chrome/Edge 升級 131 版後壞掉了。

設法重現問題,找了台久未開機的 VM 還有 Edge 130 版測試模擬網頁如下圖,<select> 下方原本有個 <input type="hidden">

自動升級 131 版後,一模一樣的程式,下方的 <input type="hidden"> 消失惹:

其實,會踩雷是因為原本程式寫法有問題:

<!DOCTYPE html>
<html>
<head>
    <meat charset="utf-8">
    <title>Custom Select</title>
</head>
<body>
    <div>
        <select name="lang" />
        <input type="hidden" name="flag" value="Y" />
    </div>
    <script>
        document.querySelector("select[name=lang]")
            .innerHTML = `<option value="C#">C#</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Python">Python</option>`;
    </script>
</body>
</html>

上面的 <select name="lang" /> 寫法是關鍵。XML 語法中 <elementTag ...></elementTag><elementTag ... /> 意義相同且可互換,但在 HTML 中 Self-Closing Tag 只能用在 Void Elemen,像 <span /> 便不是合法寫法,這個雷我在兩年前踩過。(參考:HTML5 自閉標籤(Self-Closing Tag)誤用案例)

同事遇到的這枚地雷則又再藏了兩年,撐到 Chrome 131 <select /> 解析行為改變才引爆。131 版把 <select /> 後方的 <input type="hidden"> 也視為其子元素,置換 innerHTML 時一併被 <option>... 取代,導致隱藏欄位消失。

不過,為什麼 Chrome 沒事幹嘛做了這項調整?131 版發行公告提到是為了支援未來可能的新規格 - Customizable Select

這項還在預覽階段的新規格將允許在 <select></select> 放入 <button><div> 等元素、在 <option> 中放入 <img> (如下圖),把百年傳統的 <select> 玩出新高度。(個人不怎麼愛就是了,因為很吃瀏覽器支援度,我寧可自刻選擇器,較無跨瀏覽器限制且更具彈性)

要嘗試這個新功能,實測得安裝金絲雀版的 Chrome 或 Edge,並開啟 #experimental-web-platform-features 設定才看得到。(參考:Request for developer feedback: customizable select)

不知是否版本還在調整中,實測呈現效果與文章的展示有落差,但意思到了。


文章範例如上圖


我執行的結果國旗圖案大小不一,選擇器上的國旗也沒顯示

增長見聞完畢。

A issues with dynamic select updates using innerHTML after Chrome/Edge updated to version 131. This change is due to Chrome’s preparation for the new Customizable Select feature. Proper HTML syntax avoids such issues.


Comments

Be the first to post a comment

Post a comment