做微视频的网站,遵义网约车,建设工程合同有哪些种类,温州专业做网站文章目录 背景引入ifream解决ifream和父页面完全跨域问题参考链接 背景
浏览器插件升级mv3版本后#xff0c;不能再使用content_script内容脚本向原浏览器#xff08;top#xff09;注入script标签达到注入脚本的目的。浏览器认为插入未经审核的脚本是不安全的行为。
引入… 文章目录 背景引入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博客
