解决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"
}

至此这个问题就解决了，希望可以帮到别人，其实还是那句，具体情况，具体分析感谢