文章目錄
- 背景
- 引入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博客
