如何通过页面body元素查找iframe ID？已知段落元素如何获取对应iframe？

嘿，我来帮你搞定这个问题！首先得明确：你的段落元素是嵌套在iframe的内部文档里的，要从这个p元素反向找到它所属的iframe，得利用浏览器提供的文档与窗口关联属性来实现。

核心思路步骤 #

• 每个DOM元素都有一个ownerDocument属性，指向它所属的文档对象——这里就是iframe内部的文档。
• 通过这个文档对象的defaultView属性（标准属性，也可兼容使用parentWindow），就能拿到iframe对应的窗口对象。
• 窗口对象的frameElement属性，就是这个窗口对应的iframe元素本身！

代码示例 #

场景1：在iframe内部的脚本中操作

如果你是在iframe自身的脚本里拿到了目标p元素，直接这么写就行：

// 先获取到段落元素
var elm = document.getElementById('parElm');
// 反向获取它所属的iframe
var targetIframe = elm.ownerDocument.defaultView.frameElement;

// 验证一下，打印iframe的ID看看
console.log(targetIframe.id); // 会输出 'iframe_id'

场景2：在主页面脚本中操作

如果是在主页面里，你需要先访问iframe的内部文档拿到p元素，再反向获取iframe（当然这里你也可以直接通过ID取iframe，但如果只能拿到p元素的场景下，这个方法就很实用）：

// 先获取主页面中的iframe
var iframe = document.getElementById('iframe_id');
// 访问iframe内部文档，拿到目标段落元素
var elm = iframe.contentDocument.getElementById('parElm');
// 反向获取对应的iframe
var targetIframe = elm.ownerDocument.defaultView.frameElement;

// 验证两个iframe是不是同一个对象
console.log(targetIframe === iframe); // 输出 true

重要提醒：同源策略限制 #

这个方法只适用于同源场景！如果iframe加载的是其他域名的页面，浏览器会出于安全考虑，阻止主页面和iframe之间的DOM交互，这种情况下你既没法获取到iframe内部的p元素，也没法反向拿到iframe。

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