解决iframe下跨域，iphone上position:fixed失效问题

=============================================2019-3-6 补充========================================

对应ios iframe 中fixed 楼主现在已经很轻车熟路了这里再补充一下宏观思路

把 iframe嵌入的页面

首先 1.想象成一个宽高100%的 div 然后用相对定位 position:relative 做基本的最底层

2 然后用 position:absolute 宽高100% top:0 left:0 做滚动页此时最关键的就是找到最里层的要滚动的div

给一个 overflow:auto 和-webkit-overflow-scrolling:touch 这2个是为了模拟滚动效果及恢复成ios的惯性滑动

3 然后就是底部的原来fixed定位的 footer了这个时候你就把 footer的style 设置成 position:absolute;left:0;botton:0就可以了

然后只要你理解的我的思路我保证没有不可能fixed的 ios iframe嵌套了放心吧

=============================================2019-3-6=============================================

最近接触了一个活动页面，先说需求

需求：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"
}

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

如果你觉得我帮到你了，买个肥宅快乐水，怎么样？哈哈哈哈哈哈

解决iframe下跨域，iphone上position:fixed失效问题相关推荐

Mac电脑上解决Chrome浏览器跨域问题
Mac电脑上解决Chrome浏览器跨域问题 1.在任何一个位置建一个文件夹 2.打开控制台,输入 open -n /Applications/Google\ Chrome.app/ --args -- ...
使用iframe+postMessage跨域操作和通信
使用iframe+postMessage跨域操作和通信场景 1. http://XXX/a.html(自己的)页面要操作http://YYY/b.html(其他域名的) 2. 看了网上很多都是同域名 ...
php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白这个跨域异步上传功能我们借助了Jquery.for ...
解决ajax请求跨域,解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法方法一 // ajax请求跨域 /* *解决a ...
170222、使用Spring Session和Redis解决分布式Session跨域共享问题
使用Spring Session和Redis解决分布式Session跨域共享问题原创 2017-02-27 徐刘根 Java后端技术前言对于分布式使用Nginx+Tomcat实现负载均衡,最常用 ...
vb跨域访问ajax,解决AJAX的跨域访问-两种有效示例
这篇文章主要为大家详细介绍了解决AJAX的跨域访问-两种有效示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧!新的W3C策略实现了HTTP跨域访问,还 ...
十秒解决开发环境跨域问题——取消浏览器同源策略
解决开发环境跨域问题方法有很多,设置代理什么的略显繁琐:接下来介绍一个十秒解决开发环境跨域问题的方法--取消浏览器同源策,解决所有跨域问题,以谷歌浏览器为例. 一:Windows ①:关闭浏览器 ②: ...
使用Spring Session和Redis解决分布式Session跨域共享问题
大家可以关注一下公众号"Java架构师秘籍" 前言对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash.轮训.根据权重.随机等.不管对于哪一种负载 ...
后端传输流跨域_Java开发中解决Js的跨域问题过程解析
这篇文章主要介绍了Java开发中解决Js的跨域问题过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下主流方法有JSONP和CORS两种,这里记 ...
前后端分离后解决微信授权跨域、微信H5授权登录跨域的问题解决
前言: 我们之前做的微信授权登录流程是: 1.第一步:用同意授权,并获取code 2.第二步:通过code换取网页授权access_token 3.第三步:刷新access_token(如果需要) 4 ...

解决iframe下跨域，iphone上position:fixed失效问题

如果你觉得我帮到你了，买个肥宅快乐水，怎么样？哈哈哈哈哈哈

解决iframe下跨域，iphone上position:fixed失效问题相关推荐

最新文章

热门文章