如何获得iframe内部的body和其他元素

原创最新推荐文章于 2026-05-11 11:23:41 发布 5.5k 阅读 AI写同款

收录于

javascript

小技巧

jquery

Qssn丶

码龄11年墨衍会员 · AI 创作全网分发

88粉丝113篇原创

关注

js中如何获取另一个IFrame的元素阅读详情

AI摘要

本文介绍了如何使用JavaScript和jQuery获取并操作iframe内部的元素。首先，通过querySelector或window.frames获取iframe元素，然后通过contentWindow.document访问iframe的内容。接着，可以使用querySelector等方法查找并操作指定的DOM元素。无论是在JavaScript还是jQuery中，步骤类似，主要区别在于jQuery提供了更简洁的语法。

记录一下如何获得iframe内部的元素~

使用js获得

//先拿到iframe元素，可以使用querySelector或者知道id可用window.frames获得
const iframe = document.querySelector('#iframe-parent-id').firstElementChild || 
window.frames['my-frame-id']

//2.1 获得body
const body = iframe.contentWindow.document.body

//2.2 使用querySelector查找其他元素
const ele = iframe.contentWindow.document.querySelector('.aaa')

使用jquery获得

//先拿到iframe元素，可以使用querySelector或者知道id可用window.frames获得
const iframe = document.querySelector('#iframe-parent-id').firstElementChild ||
 window.frames['my-frame-id']

//2.1 获得body
const body = $(iframe).contents().find('body')[0]

//2.2 使用querySelector查找其他元素...