文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:iframe在iphone手机上的问题

lzzyok小精灵

lzzyok小精灵

2024-04-23 23:10

关注

  IFRAME是html标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

  iframe在iphone手机上的问题

  问题1:

  通过document.addEventListener("scroll",function(){})对页面滚动监听事件进行监听,但iOS下$(document).scrollTop()值始终为0,对页面监听无效。

  原因:

  因为iOS下iframe的高度会根据页面的内容自适应,造成了iframe的高度过高(即iframe的高度>屏幕的高度)。则iframe内部html、body标签即使设置为100%,它的值也是页面所有内容撑开的高度。

  解决方法:

  将body设置为fixed,宽高设为100%,添加-webkit-overflow-scrolling:touch;在body下写一个div,针对这个div进行scroll监听操作。

  html{

  position:relative;

  width:100%;

  height:100%;

  overflow:hidden;

  }

  body{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  height:100%;

  overflow:auto;

  -webkit-overflow-scrolling:touch;

  }

  问题2:ios中点击,通过display=block或.show()显示元素会跳转顶部。

  解决方法:将元素设置为visibility:hidden,通过改变值为"visible"显示元素。

  问题3:ios微信中,iframe下长按二维码识别不了。

  原因:iframe受微信的安全限制,阻止了默认事件,也可能是父子窗口的原因。

  解决思路:看其他文章说可以在iframe中的二维码被按下touchstart的时候,将二维码地址推送至父页面。父页面接收到二维码识别的请求,则创建一个不可见的img元素,src为刚刚传输过来的二维码地址,并且二维码置顶铺满整个屏幕。在touchend与touchcancel时,通知父窗体删除二维码。(具体没有尝试过)

  <iframe>标签规定一个内联框架。一个内联框架被用来在当前HTML文档中嵌入另一个文档。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯