iframe通信相关:父操作子,子操作父,兄弟通信
这里写window和document是认为代表了BOM和DOM(个人理解不一定对)
拿到了window就能操作全局变量和函数
拿到了document就能获取dom,操作节点
父操作子
window:选择器.contentWindow
document:选择器.contentWindow.document
1 // 父页面里面写选择器获取到iframe元素,通过contentWindow获取到子页面的window,然后操作变量或函数 2 document.getElementById().contentWindow.childrenFunction() 3 4 // 父页面选择器 通过子页面选择器操作dom 5 document.getElementById().contentWindow.document.getElementById().innerText = xxx
子操作父
window:parent.window
document:parent.document
1 // 拿到父页面的window,调用父页面的函数 2 parent.window.parentFunction() 3 4 // 拿到父页面的document,操作父页面的dom 5 parent.document.getElementById().innerText = xxx
兄弟通信(通过父级间接操作)
window:parent.选择器(目标iframe).contentWindow
document:parent.选择器(目标iframe).contentWindow.document
基于子父级通信
兄弟通信就是先向上找到父级,父级再选择目标iframe,然后再进行操作
分类:
内置方法记录
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)