V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
black11black
V2EX  ›  JavaScript

同源 iframe 如何修改内部 dom?

  •  
  •   black11black · 2020-08-16 17:33:10 +08:00 · 2085 次点击
    这是一个创建于 1320 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    7 条回复    2020-09-08 14:21:20 +08:00
    wy
        1
    wy  
       2020-08-16 17:48:04 +08:00 via Android
    在 iframe 中嵌入脚本,然后 postMessage 接收消息做相应的修改
    Foxkeh
        2
    Foxkeh  
       2020-08-16 17:57:37 +08:00
    lisianthus
        3
    lisianthus  
       2020-08-16 17:58:25 +08:00 via iPhone
    试试 iframeElem.contentDocument
    lisianthus
        4
    lisianthus  
       2020-08-16 18:02:18 +08:00
    ochatokori
        5
    ochatokori  
       2020-08-16 18:07:15 +08:00 via Android
    先获取 iframe 元素
    iframe.contentWindow.document.getElementById
    w292614191
        6
    w292614191  
       2020-08-17 11:52:27 +08:00
    子 iframe
    function setDom(){

    }

    iframe.contentWindow.setDom();
    flowfire
        7
    flowfire  
       2020-09-08 14:21:20 +08:00
    F12 控制台也是无法使用你所说的方法获取到节点的
    你能获取到节点的原因是因为你是在 iframe 内部右键检查元素,Chrome 会自动把控制台执行环境切换到框架内部,相当于你是在框架内部执行的命令
    你可以尝试把 Console 的执行环境切换到 top 再获取,就会发现获取不到你刚刚所说的节点了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1236 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:01 · PVG 02:01 · LAX 11:01 · JFK 14:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.