文章目录
- 背景
- 引入ifream
- 解决ifream和父页面完全跨域问题
- 参考链接
背景
浏览器插件升级mv3版本后，不能再使用content_script内容脚本向原浏览器（top）注入script标签达到注入脚本的目的。浏览器认为插入未经审核的脚本是不安全的行为。
引入ifream
由插件（扩展）插入一个ifream标签。ifream子页面中包含的script标签中脚本允许插入到top页面中。但是插入后存在跨域问题：
- 完全跨域（二级域名和主域名都不相同）
// 完全跨域的域名
document.domain = 'aaa.xxx.com' // 父页面域名
document.domain = 'bbb.ccc.com' // 子页面域名
- 不完全跨域
// 二级域名不同，主域名相同
document.domain = 'aaa.xxx.com' // 父页面域名
document.domain = 'bbb.xxx.com' // 子页面域名
- 不跨域
这里不讨论不跨域和不完全跨域的问题。毕竟扩展插入的子页面大部分都是插入到别人的网站里面。
扩展创建ifream标签，引入子页面：
let ifELe = document.createElement('iframe')
ifELe.src = 'domain' // 具体的逻辑由ifream子页面处理
// ifELe.src = 'https://www.baidu.com'
ifELe.style.width = '100%'
ifELe.setAttribute('data-name', 'xxx')document.body.appendChild(ifELe)
注！引入的子页面首先要支持被其他页面嵌入或不包含一些限制。否则会被父页面阻止加载。
解决ifream和父页面完全跨域问题
跨域时，子ifream页面不能获取到父页面window document对象
但可以使用消息广播进行数据传输，绕过跨域问题。
// ifream子页面：监听父页面发来的数据：ifream里面的window对象window.addEventListener('message-type', function(e){console.log(e.detail)})// top父页面：父页面的window对象window.dispatchEvent(new CustomEvent('message-type', {detail: {name: '张三',age: 18}}))
参考链接
iframe相关及跨域解决方案 - 掘金
iframe跨域解决办法_iframe跨域解决方案-CSDN博客
