为什么label属性不适用于Chrome中iFrame中的选项标签?

3npbholx  于 2023-06-03  发布在  Go
关注(0)|答案(1)|浏览(281)

我正在尝试制作一个HTML编辑器,并将结果放在<iframe>中。除了<option>标记的label属性被完全忽略外,其他一切都正常。我正在使用最新版本的Chrome(113.0.5672.127)
示例代码:

<!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>
        let str = document.getElementById('a').outerHTML;
        let frm = document.getElementById('frm');
        let body = frm.contentDocument.getElementsByTagName('body')[0];
        body.innerHTML = str;
    </script>
</body>
</html>

结果

<iframe>外部的选项按预期显示其标签,但内部的选项仅显示其文本内容。

z0qdvdin

z0qdvdin1#

检查这两个文档的compatMode属性,你的主文档有CSS1Compat,但你的iframe文档有BackCompat-所以它是以quirks模式呈现的。显然,在怪癖模式下,选项label属性被忽略。
所以你需要确保你的iframe文档一开始就没有处于quirks模式。一种方法是让一个带有<!doctype html>的文档首先加载到iframe中:

<select id="a">
  <option value="a" label="a">aaaaaa</option>
  <option value="b" label="b">bbbbbb</option>
  <option value="c" label="c">cccccc</option>
  <option value="d" label="d"></option>
</select>
<iframe id="frm" srcdoc="<!doctype html><html/>" onload="populateSelectField()"></iframe>
<script>
  function populateSelectField() {
    let str = document.getElementById('a').outerHTML;
    console.log(str)
    let frm = document.getElementById('frm');
    let body = frm.contentDocument.getElementsByTagName('body')[0];
    body.innerHTML = str;
  }
</script>

我在这里的一个片段中很难正确地运行它(也许与iframe沙箱属性有关?)),但您可以看到它在这里工作,https://jsfiddle.net/58cyuhan/
编辑:看起来即使使用srcdoc="",它也能工作-显式指定doctype似乎甚至没有必要,也许是等待iframe的load事件,这使得它具有“正确”的文档模式(?).

相关问题