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

3npbholx 于 2023-06-03 发布在 Go

关注(0)|答案(1)|浏览(282)

我正在尝试制作一个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>外部的选项按预期显示其标签，但内部的选项仅显示其文本内容。

google-chrome

来源：https://stackoverflow.com/questions/76362950/why-is-the-label-attribute-not-working-for-option-tags-inside-an-iframe-in-chrom

1条答案

按热度按时间

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事件，这使得它具有“正确”的文档模式（？）.

赞(0）回复(0）举报 2023-06-03

我来回答

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

1条答案

相关问题

热门标签

最新问答