我正在尝试制作一个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>
外部的选项按预期显示其标签,但内部的选项仅显示其文本内容。
1条答案
按热度按时间z0qdvdin1#
检查这两个文档的
compatMode
属性,你的主文档有CSS1Compat
,但你的iframe文档有BackCompat
-所以它是以quirks模式呈现的。显然,在怪癖模式下,选项label
属性被忽略。所以你需要确保你的iframe文档一开始就没有处于quirks模式。一种方法是让一个带有
<!doctype html>
的文档首先加载到iframe中:我在这里的一个片段中很难正确地运行它(也许与iframe沙箱属性有关?)),但您可以看到它在这里工作,https://jsfiddle.net/58cyuhan/
编辑:看起来即使使用
srcdoc=""
,它也能工作-显式指定doctype似乎甚至没有必要,也许是等待iframe的load事件,这使得它具有“正确”的文档模式(?).