关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法

1 篇文章 0 订阅
1 篇文章 0 订阅

项目中有个需求时在页面的最下面有一排按钮,这排按钮需要固定到页面的最下面,不能随着屏幕的滚动为滚动。


问题:

功能是使用css的position:fixed; bottom:0;属性设置的。

单独一个页面访问,不管在PC上还是移动设备上都可以正常显示。

But,当这个页面被一个iframe嵌入的时候,在ios设备上footer一直处在页面内容的最下面,而不是屏幕的最下面。而PC和android设备上可以正常显示。

原因:iframe嵌入后,ios设备不支持position:fixed;属性。


解决办法:

方案1:.动态计算footer的高度,而且footer的高度时相对iframe计算的,所以footer的高度(top)是 = 屏幕滚动条的高度 + 屏幕的高度 - header的高度 - footer的高度。

当时亲测,在ipad上是不支持window.scroll事件的,没法获取真正的scrollHeight的值。如果添加了touchmove事件,但获取的pageY高度又不准确,时刻在变化,导致footer上下闪动。  【亲测失败,请高人指教!!!】

方案2:设置body的高度为一个固定值,即body{height:600px;overfolw-y:auto;} ,这样footer就能永远停在屏幕的最下面了。但是body体中出现滚动条,需要隐藏起来。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用iframe加载跨域资源时,浏览器会使用同源策略进行限制,因此需要使用代理页面来解决跨域问题。ASP.NET中可以使用aspx页面来作为代理页面。 具体步骤如下: 1. 在项目中添加一个aspx页面,例如Proxy.aspx。 2. 在Proxy.aspx.cs文件中编写一个处理请求的方法,例如GetResource()。 3. 在GetResource()方法中使用WebRequest对象向目标资源发起请求,并获取响应数据。 4. 将响应数据返回给前端页面。 5. 在前端页面中使用iframe的src属性指定代理页面的地址,并将目标资源的地址作为参数传递给代理页面。 6. 在代理页面中获取目标资源的地址,并在GetResource()方法中使用该地址发起请求。 7. 将响应数据返回给前端页面,并在前端页面中使用iframe加载响应数据。 示例代码如下: Proxy.aspx.cs: ```csharp protected void Page_Load(object sender, EventArgs e) { // 获取目标资源的地址 string url = Request.QueryString["url"]; // 发起请求并获取响应数据 HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8); string data = reader.ReadToEnd(); // 将响应数据返回给前端页面 Response.Clear(); Response.Write(data); Response.End(); } public void GetResource(string url) { // 构造代理页面的地址 string proxyUrl = "http://localhost:8080/Proxy.aspx?url=" + url; // 使用iframe加载代理页面 var iframe = document.createElement("iframe"); iframe.src = proxyUrl; document.body.appendChild(iframe); } ``` 前端页面: ```html <body> <script> GetResource("https://example.com/resource"); </script> </body> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值