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

记录一下如何获得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查找其他元素...
### 使用 JavaScript 获取 iframe元素的高度 当需要获取嵌入网页中的 iframe 内部元素的高度时,有多种方式可以实现这一目标。以下是两种主要的方法: #### 方法一:通过 `contentDocument` 或者 `contentWindow.document` 对于同源策略下的 iframe(即主页面 iframe 页面来自同一个域名),可以直接访问其内部文档对象模型 (DOM),进而测量特定元素的高度。 ```javascript // 假设有一个 id 为 'myIframe' 的 iframe 标签 var iframe = document.getElementById('myIframe'); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // 兼容不同浏览器 var elementInsideIFrame = innerDoc.querySelector('#elementId'); // 替换为你想要查询的选择器 var heightOfElement = elementInsideIFrame.offsetHeight; console.log(heightOfElement); ``` 这种方法利用了现代浏览器提供的 `contentDocument` 属性来直接操作 iframe 文档[^1]。 #### 方法二:使用 jQuery 并处理加载事件 如果项目中已经引入了 jQuery 库,则可以通过更简洁的方式完成相同的操作,并且能够更好地管理异步加载过程。 ```javascript $('#myIframe').on('load', function(){ var $iframeBody = $(this).contents().find('body'); var bodyHeight = $iframeBody.height(); console.log(bodyHeight); // 如果要获取某个具体 ID 的元素高度 var specificElementHeight = $iframeBody.find('#specificElement').outerHeight(true); console.log(specificElementHeight); }); ``` 此代码片段展示了如何监听 iframe 加载完毕后的回调函数,在其中查找所需 DOM 节点并读取它们的高度属性[^2]。 需要注意的是,上述所有方法都假定了主窗口与 iframe 是同源的;如果不是这样,由于安全原因,这些技术将无法正常工作,因为会受到跨域资源共享(CORS)政策的影响[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值