iframe 的通信方式

发布时间: 2022-07-12 22:00:19 作者: 大象笔记

父级访问子 iframe 的方式

const iframe = document.querySelector('iframe');
const iDoc = iframe.contentWindow.document;
iDoc.querySelector('#text')

子 iframe 访问父级

window.parent.document.querySelector("#text")

postMessage 通信参考

完美解决iframe父子间的通信问题

我是一名山东烟台的开发者，联系作者

相关笔记

JS 的省市区三级联动选择组件
React render - 费解的 Uncaught Error
网页上使用 js 调用打印机
ES6 的箭头函数，让 let that = this 去死吧
requerejs, webpack, browserify 的对比
使用 async / await 实现 setTimeout 的同步写法
百度统计的自定义上报功能 - 事件分析
ES6 中 let, var, const 的区别
避免三方 js 文件被重复加载
javascript array 数组只保留前 N 项
js 除法保留两位小数
使用 local storage 存储页面产生的数据结果
javascript 正则提取页面中的变量值
使用 gulp 检测 javascript 语法
JS 将日期时间字符串转换成包含 TZ 的 UTC 时间
scrollTop 的浏览器兼容问题
使用 Babel 将 ES6 转成 ES5 代码
微信网页分享朋友圈失败的迷之异常
Uncaught SyntaxError: await is only valid in async function
ES6 三个点新语法：数组元素的 rest / spread ，与对象属性的 rest / spread
JQuery 自动勾选 checkbox, 并触发提交
DevTools failed to parse SourceMap
wordpress 报错 TypeError: $ is not a function
Eloquent Javascript
node module 包名以 @ 符号为前缀是什么意思
Document Object Model (DOM)
javascript 正则解析选择题答案
requirejs
RequireJS 的语法糖 Simplified CommonJS Wrapping
百度编辑器 UEditor 限制高度
Grunt.js Warning: Path must be a string
CoffeeScript
js 三元表达式的简写形式
javascript
使用 javascript 对 URI 进行转义
全局对象守护神 - JS 的匿名自调用函数
ES6 函数参数的 destructuring
使用 esbuild 对 js 进行打包
使用 fiddler5 替换线上生产环境的 JS 文件，方便调试
jQuery
innerHTML, innerText, TextContent 的区别
使用 fetch 替代 ajax
javascript 代码风格
百度统计事件分析对出站链接进行统计
百度编辑器 UEditor 设置支持上传的图片格式
Google 分析实现跨域名统计
360 度展示产品 js 实现
返璞归真：使用纯粹的 javascript 替换掉 jQuery
querySelectorAll 通过页面按钮的文本内容来选择相应标签
Javascript Array Buffer 与字符串相互转换