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

最新推荐文章于 2024-01-07 23:38:29 发布

Qssn丶

最新推荐文章于 2024-01-07 23:38:29 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小技巧 javascript jquery 文章标签： js

本文链接：https://blog.youkuaiyun.com/dKnightL/article/details/118928588

javascript 同时被 3 个专栏收录

20 篇文章

订阅专栏

小技巧

3 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下如何获得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查找其他元素...