如何获取父页面CDATA并传递至iframe内Div的innerHTML？

当前代码的问题 #

• 错误使用getElementByClassName，正确方法是getElementsByClassName（复数形式），且该方法返回元素集合，需指定索引获取单个元素
• iframe内直接用document指向的是自身文档，而非父页面，需通过parent.document访问父页面DOM
• 若gon.user_id是父页面的全局变量而非元素类名，当前代码的选择器逻辑完全错误

解决方案 #

情况1：gon.user_id是父页面的全局变量

如果父页面已将CDATA解析为全局变量gon.user_id，直接在iframe中通过parent对象访问：

<body>
<div id="test">change</div>
<script type="text/javascript">
// 访问父页面的全局变量gon.user_id
var IDer = parent.gon.user_id;
document.getElementById('test').innerHTML = IDer;
</script>
</body>

情况2：gon.user_id是父页面中存储CDATA的元素类名/id

假设父页面中存储CDATA的元素类名为gon-user-id（类名不能包含.，.是CSS选择器的类名分隔符），则代码如下：

<body>
<div id="test">change</div>
<script type="text/javascript">
// 从父页面获取目标元素，getElementsByClassName返回集合，取第一个元素
var targetElement = parent.document.getElementsByClassName('gon-user-id')[0];
if (targetElement) {
  document.getElementById('test').innerHTML = targetElement.innerHTML;
}
</script>
</body>

如果是id选择器，效率更高：

<body>
<div id="test">change</div>
<script type="text/javascript">
var targetElement = parent.document.getElementById('gon-user-id');
if (targetElement) {
  document.getElementById('test').innerHTML = targetElement.innerHTML;
}
</script>
</body>

注意事项 #

• 确保iframe与父页面同域，否则会存在跨域访问限制（若服务允许嵌入，通常已满足同域要求）
• 确认父页面中目标元素的选择器准确，避免因类名/id书写错误导致无法获取元素

内容的提问来源于stack exchange，提问作者Luke O'Donnell