解決iframe下跨域，iphone上position:fixed失效問題
最近接觸了一個活動頁面，先說需求
需求：iframe下引用另一個專案的頁面（這裡諮詢了某大神，建議手機端不要再使用iframe了，已經被遺棄了），
這裡出現問題1：跨域
然後就是引用的長度肯定會大於你的手機高度，需要滾動。然鵝滾動時在頁面的某個位置需要點選一個彈窗。覆蓋整個螢幕，然後不隨螢幕滾動而動，也就是問題2：iframe下position:fixed失效，
解決方案：
百度許久，1.有說用flex替代fixed的 然而 我做的這個和替代效果不同 所以無法取用
2.有說動態計算滾動高度，然後設定定位，實時改變top值 √。
我採用的就是第二種方案 不過百度介紹基本無效 我需要對我的頁面重新濾清結構
大致我們要做到的結構
1.a專案 iframe 的src引入b專案網址
2.b專案 首先1 要注意html頁面上是否開頭帶有
<!DOCTYPE html>
這個很關鍵 如果不帶 則為怪異模式 高度是body的高 如果帶了 就是標準的w3c規範 高度顯示html 然後是body
我這裡帶著 這個規範 （主要防止再出連鎖問題）
3.body下只留一個div 樣式如下 這裡切記 先個html,body{height:100%} 否則無高
<div id="b" style="height: 100%;position: relative;overflow: auto;">
overflow就是準備做滾動效果
4.然後 主頁面 為第一個div 樣式如下 這2個配合 現在頁面是會滾動的 不多解釋
<div style="position: absolute;top: 0px;left: 0px">
5.然後 彈框 為另一個div 樣式如下 當然 預設的樣式都在class裡 比如display:none 不做展示
<div class="alert-bg1" style="position: absolute;left: 0px;top: 0px;height: 100%;">
6.現在主結構為
div （relative） （id=b）
|-------div （absolute） 主內容
|-------div （absolute） 模態框
7.然後寫js
var w = document.getElementById("b"); w.onscroll=function(e) { document.querySelector(".alert-bg1").style.top=w.scrollTop+"px" }
b是總的div 然後監聽b的滾動距離 然後賦值給模態框的top
到這 就解決了iphone 不相容fixed的問題
不過 問題2又來了 當你滑動你的模態框時（因為我的模態框裡還有很多內容，也需要滾動），所以會發生頁面的抖動，相信你看了很多帖子 抖動已經明白了 那怎麼辦呢 我在我的專案裡利用觸控模態框然後將b的div整體靜止 也就是監聽touchmove
overflow：hidden即可 然後當我的模態框關閉時 再將overflow:auto 設定回來 即可
靜止b
//觸控彈窗 後面不動 $(".alert-bg1").on("touchmove",function (e) { document.getElementById("b").style.overflow="hidden" })
啟動b
function closeRule() { $('.alert-bg1').fadeOut() document.getElementById("b").style.overflow="auto" }至此 這個問題就解決了，希望可以幫到別人，其實還是那句，具體情況，具體分析 感謝