同源 iframe 如何修改内部 dom？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

? Meteor

? JSLint - a JavaScript code quality tool

? jsFiddle

? D3.js

? WebStorm

推荐书目

? JavaScript 权威指南第 5 版

? Closure: The Definitive Guide

这是一个创建于 1358 天前的主题，其中的信息可能已经有所发展或是发生改变。

（腾讯云最新优惠活动来了：云产品限时1折，云服务器低至88元/年，点击这里立即抢购：9i0i.cn/qcloud，更有2860元代金券免费领取，付款直接抵现金用，点击这里立即领取：9i0i.cn/qcloudquan）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

如题，需求是前端想要修改后端渲染好的图表。

API 是同源的，代码完全自主，但是后端改代码比较麻烦，所以想试试能不能直接用前端加点小补丁的方式，所以需要接管 iframe 当中的 dom 内容。

开发框架是 Vue，在 Vue 的 mounted 中尝试了一下document.getElementById()发现并不能获取到 iframe 内部的 ID 名，如果是在网页 F12 控制台执行这段代码是能获取到的，但是在 Vue 中获取不到，不知道什么原因。

所以有办法获取 dom 吗？谢谢大家

7 条回复 ? 2020-09-08 14:21:20 +08:00

2020-08-16 17:48:04 +08:00 via Android

在 iframe 中嵌入脚本，然后 postMessage 接收消息做相应的修改

Foxkeh

2020-08-16 17:57:37 +08:00

参考 iframe 的父子兄弟调用
https://www.cnblogs.com/duankaige/archive/2012/09/20/2695012.html

lisianthus

2020-08-16 17:58:25 +08:00 via iPhone

试试 iframeElem.contentDocument

lisianthus

2020-08-16 18:02:18 +08:00

在 javascript.info 里面有讲
https://zh.javascript.info/cross-window-communication

ochatokori

2020-08-16 18:07:15 +08:00 via Android

先获取 iframe 元素
iframe.contentWindow.document.getElementById

w292614191

2020-08-17 11:52:27 +08:00

子 iframe
function setDom(){

}
父
iframe.contentWindow.setDom();

flowfire

2020-09-08 14:21:20 +08:00

F12 控制台也是无法使用你所说的方法获取到节点的
你能获取到节点的原因是因为你是在 iframe 内部右键检查元素，Chrome 会自动把控制台执行环境切换到框架内部，相当于你是在框架内部执行的命令
你可以尝试把 Console 的执行环境切换到 top 再获取，就会发现获取不到你刚刚所说的节点了