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

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

原创最新推荐文章于 2024-01-07 23:38:29 发布 · 5.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 同时被 3 个专栏收录

20 篇文章

订阅专栏

小技巧

3 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

本文介绍了如何使用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查找其他元素...