Chrome浏览器中iframe内<option>标签label属性失效原因咨询

问题分析 #

Chrome浏览器下，通过innerHTML将包含option的select插入到iframe时，option的label属性未被正确渲染：主页面的select能正常用label覆盖option文本，但iframe内的select只会显示option的文本内容（空内容就显示空白）。

这是因为Chrome处理iframe中通过innerHTML插入的表单控件时，不会自动触发option标签label属性的渲染逻辑，而是直接解析文本内容；而主页面的select是页面初始化时就存在的，浏览器会正常处理label属性。

解决方案 #

不要直接用innerHTML插入HTML字符串，而是使用document.importNode将主页面的select元素完整克隆到iframe中，这样能保留所有属性的原生渲染行为。

修改后的代码 #

<!DOCTYPE html>
<html>
<head></head>
<body>
    <select id="a">
        <option value="a" label="a">aaaaaa</option>
        <option value="b" label="b">bbbbbb</option>
        <option value="c" label="c"></option>
        <option value="d" label="d"></option>
    </select>
    <iframe id="frm"></iframe>
    <script>
        const originalSelect = document.getElementById('a');
        const frm = document.getElementById('frm');
        const iframeDoc = frm.contentDocument;
        // 完整克隆元素，包括所有属性和子节点，保留原生渲染逻辑
        const clonedSelect = iframeDoc.importNode(originalSelect, true);
        iframeDoc.body.appendChild(clonedSelect);
    </script>
</body>
</html>

备选方案 #

如果必须使用HTML字符串的方式，插入后可以通过重新设置select的innerHTML触发渲染：

let str = document.getElementById('a').outerHTML;
let frm = document.getElementById('frm');
let body = frm.contentDocument.getElementsByTagName('body')[0];
body.innerHTML = str;
// 重新设置innerHTML触发渲染
const iframeSelect = body.querySelector('#a');
iframeSelect.innerHTML = iframeSelect.innerHTML;

内容的提问来源于stack exchange，提问作者haolt