iframe巢狀子頁面
<iframe
width
="100%"
height
="100%"
id='test'
title
='測試'
src=''
frameborder
="0"
/>
現在的高度是整個螢幕的高度，如果子頁面高度大於螢幕高度，內容無法顯示，並且沒有滾動條，要有滾動條必須給iframe賦值乙個確定的高度。但是又由於他是跨域子頁面，所以沒辦法獲得子頁面的高度，所以可以使用postmessage方法，子頁面獲取高度傳值給父頁面，然後變化iframe的高度
通過監聽子頁面的postmessage資訊，獲取資訊來改變父頁面iframe高度
window.addeventlistener('message', (event) =>px`
}})
接下來是子頁面的操作:
給子頁面的最外層設定乙個div包層，設定id
子頁面內容
然後通過mutationobserver監聽子頁面改變，當監聽到改變的時候，觸發postmessage
const targetnode = document.getelementbyid('child')
const configobserver =
//建立乙個觀察器例項並傳入**函式
observer = new mutationobserver(() =>)
//以上述配置開始觀察目標節點
observer.observe(targetnode, configobserver)
這樣的話，只要子頁面有任何的改變都會觸發postmessage傳回變化的高度
最後在頁面解除安裝的時候取消監聽
observer.disconnect()
包靈！！！
iframe 跨域 父頁面向子頁面傳值
今天碰到乙個需求，是不同域的兩個頁面之間傳值 在網上找了一下，一般有兩個解決方案，乙個是建立乙個 頁面，通過 頁面傳值，另乙個方法是通過h5的postmessage方法傳值，今天用的是第二種。var iframe document.getelementbyid onemap var msg var ...
子頁面iframe跨域執行父頁面定義的JS方法
問題需求 父頁面與子頁面iframe跨域巢狀，子頁面要觸發父頁面所定義的js方法 父子頁面的資料傳遞。下文中會用到一些檔案 父頁面 parent.html 嵌在父頁面的子iframe頁面 child.html。同域時 iframe 呼叫父頁面的js方法 在同域的情況下，子iframe頁面可以很方便地...
iframe跨域父子頁面通訊方法
儘管iframe因相容 效能等問題逐漸被替換掉，但有不少存量專案仍在使用。最近，我們部門一位小夥伴遇到iframe跨域相關問題，詳細如下 問題前置條件 有兩個系統a b 都是銀行存量老系統 a b跨域 a系統中有乙個頁面a b系統中有乙個頁面b b以iframe方式嵌在a頁面中。問題描述 那麼，if...