精华内容
下载资源
问答
  • 苹果手机 iframe 无法滚动bug
    2015-10-16 14:25:00

    原来在html5下,iframe 只有 src 属性
    scroling='no'

    解决办法:
    在iframe外加一层第div,设置样式-webkit-overflow-scrolling:touch;overflow:scroll;

    让超出的div 可以通过touch 来滚动

    转载于:https://www.cnblogs.com/geek12/p/4885202.html

    更多相关内容
  • 苹果手机iframe撑大父页解决办法

    千次阅读 2018-08-14 15:07:42
    引入的页面是可以手触摸操作的,引入成功后安卓正常适应,可以手触摸操作,而苹果手机用手触摸放大时,iframe的宽也被放大了,变成了pc版。 1.试过将iframe外层盒子写死,页面宽度写死,然而iframe还是会被撑开,...

    最近项目中需要在自己页面里引入第三方页面,除了iframe我也不知道还有什么可以引入。

    引入的页面是可以手触摸操作的,引入成功后安卓正常适应,可以手触摸操作,而苹果手机用手触摸放大时,iframe的宽也被放大了,变成了pc版。

    1.试过将iframe外层盒子写死,页面宽度写死,然而iframe还是会被撑开,页面被撑大。(失败)

    2.试过给iframe外层盒子overflow hidden  但是这样的话iframe依旧撑大,超出的也只是隐藏了看不见(失败)

    3.只有给iframe写一个死width并且加!important才能避免iframe放大(然而这样的话不同的手机无法自适应)

    最终解决如下:

    	<div style='width:100%;height:100%;overflow: hidden;'>
    		<iframe id="iframe1" src="https://www.lifeccp.com/viewer/viewer.html?studyUID=1.2.840.10008.5.1.4.31.2902478067.10512.1533784252.649&userId=2777&sessionId=DA30E3E9A35D28D04FCF9994CDC7050C&hospitalId=562" height="90%";  frameborder="0" scrolling="no"></iframe>
    	</div>
    document.getElementsByTagName('iframe')[0].addEventListener('load',function(){
    	 	var wid = window.screen.width;
    		$('#iframe1')[0].style.cssText ="width:"+wid+"px !important;";
    })
    
    //在iframe页面加载完成后,给iframe设置等屏幕宽度 并且!important

     

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

    来源 | http://www.fly63.com/article/detial/7370

    问题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时,通知父窗体删除二维码。(具体没有尝试过)

    本文完〜

    展开全文
  • 今天在解决公司平台网页在手机端访问兼容性问题时,遇到index页面通过iframe嵌入右边内容页面在anroid显示正常(主要为:页面内容超过iframe高度、宽度,可以正常显示滚动条,也可以滑动显示),但是在iphone自带的...

        今天在解决公司平台网页在手机端访问兼容性问题时,遇到index页面通过iframe嵌入右边内容页面在anroid显示正常(主要为:页面内容超过iframe高度、宽度,可以正常显示滚动条,也可以滑动显示),但是在iphone自带的浏览器或者在iphone下载其他浏览器访问,iframe内容均无法全部显示,主要表现为:

    1、iframe只显示了嵌入内容的部分,无法显示全部,感觉内容被截掉了

    2、iframe展示滚动条,实现滑动访问全部内容

    后经过查找相关资料,通过以下方式解决:

    参考:https://www.jianshu.com/p/bd9fbf5a14f0dai

    css及html设置

    <!--设置外部div样式,尽量不要写在页面div style中,有可能不起作用-->
    .show_iframe{
    -webkit-overflow-scrolling: touch;
    overflow-y: 
    scroll;position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    }
    .show_iframe iframe {position: absolute;bottom: 0;height: 100%;width: 100%}
    <!--在iframe外包一个div-->
    <div class="show_iframe">
    			<div style="display:none" class="loading"></div>
    			<iframe scrolling="yes" frameborder="0" wicket:id="mainPage"></iframe>
    </div>

    以上代码亲测可用,希望我走过的坑,大家都能在看过我的文章后跳过去,那我也就欣慰了,哈哈

    展开全文
  • 给需要fixed属性的元素添加给滚动监听,可以解决IOS中iframe的fixed定位异常问题$('.callbtn').css('position', 'absolute') $(document.body).on('scroll', function(){ $('.callbtn').css('position', 'fixed') })...
  • IOS手机端不支持iframe解决方法

    万次阅读 2018-09-07 11:36:06
    解决了在iphone上页面调用iframe没有滚动条及底部按钮不显示的问题。 (调试项目:中智二期微信版) 页面A &lt;div class="popover-bg"&gt;  &lt;div class="popover-type-filter-bg...
  • 做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台...iframe自动变宽了,在IOS手机上出现滚动条第一步:定义 iframe 中的scrolling属性为no,设置iframe中不显示滚动条。第二步:设置iframe的样式为...
  • 场景是这样的,业务需要展示协议,我们公司所有产品的多个地方都有展示协议的需要,于是,我们就封装了一个组件,一个iframe里读取从后管获取的协议页面。 起初,协议页面没有设置上下左右边距,ios的页面和安卓的...
  • 这要从我设置的子iframe的src值说起,地址大概是这样的:forder/test.html 这样就会引起ios不适,他会认为这个页面和他的父页面是跨域一样的存在。可是是为什么呢? 应该是domain的关系,他会认为forder/test.html...
  • 解决boostrap中,iframe渲染下,苹果手机横向无法显示剩余内容问题 <!--[if lt IE 8]> ;ie.html" /> <![endif]--> style="-webkit-overflow-scrolling:touch; overflow: scroll;" > <iframe class="J_...
  • 有个人给我发了串js代码,说可以解决,不知道怎么使用, ``` setTimeout(function(){  $('img').on('touchstart',function(){ ... var url=$(this).attr("src");... url=document.location.protocol+"//"+...
  • 苹果与安卓微信浏览器iframe兼容性问题: 苹果Iframe滚动问题需加外部div=>overlow-y:scroll 苹果Iframe打开下载问题,需从父页面parent.document.href=“”打开下载 苹果docx文件微信浏览器只支持预览,不...
  • HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <iframe src=""></iframe> <...要让IFRAME支持...
  • 今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站。使用http://luanqi-cat.blogbus.com这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这个网页上。搜索了一番,才知道原来这个...
  • 因第三方平台中涉及“长按扫码进入小程序功能”,经测试ios手机微信浏览器中无法识别二维码图片,特此记录解决方案。 解决方式很简单,直接上代码 思路:ifream嵌套页进入扫码功能时,在iframe上增加一层透明的img...
  • iphone下iframe问题记录

    2021-06-17 05:05:05
    需求iframe手机上展示正好一屏的内容,横向100%,纵向高度固定(例如500px)超出可滚动。问题这些问题在Mac上、window上、Android上都是没有的。宽高不受限制给iframe节点style上设置宽高,加上!important也不会生效...
  • 手机页面用iframe添加视频样式出错 ![图片说明](https://img-ask.csdn.net/upload/201512/21/1450681912_603059.png) 怎么调整才正常
  • iframe 直接在ios APP中运行,可能有问题,解决办法可以参考如下代码案例一#ifram {border: 0;width: 1px;min-width: 100%;*width: 100%;}let ifram = document.getElementById('ifram');if (navigator.userAgent....
  • 苹果手机页面不兼容问题——mui

    千次阅读 热门讨论 2018-08-29 21:00:35
      近期,客户打电话来说系统出现了一个问题,就是苹果的手机页面不能往下滑动,导致数据显示...  具体的原因是因为mui的框架样式不兼容苹果手机的浏览器,css样式有两个属性可以完美的帮助我们解决这个问题。我...
  • layer弹出层显示不完时,在苹果机型中 滚动条会失效。造成无法使用滚动条查看更多。解决方法是向layer弹出层加入样式
  • iframe在ios的兼容性问题

    千次阅读 2019-08-27 16:40:38
    问题简述:在xcode模拟器(真机)上iframe内容不显示,以及内容显示不完全 1、在xcode模拟器(真机)上iframe内容不显示解决方案: 1-1在cordova 项目的config.xml中配置 <access origin="*" subdomains="true...
  • 今天遇到的问题,iframe适配iPhone时会出现iframe的大小会变很大,完全看不成,我一搜索大部分都是这个问题。 这个是iframe部分  注意with和height都给100% &lt;iframe id="mainIframe" class=&...
  • iframe不完全显示的解决方法

    万次阅读 2011-05-18 15:49:00
    <br />如果在页面中用到了iframe标签,有时在浏览器中并不能完全显示iframe,导致有些iframe内的内容不能被显示,如果遇到这种情况,使用以下js可以解决大多数问题。   这是iframe标签:...
  • iphone中 iframe白屏问题

    千次阅读 2018-04-28 18:42:12
    在 cordova 项目里的 config.xml里加上 &lt;access origin="*" /&gt; &lt;allow-navigation href="*" /&gt; &lt;allow-intent href="*"...
  • 当任务数据一旦多了之后,还是会有遮挡问题,并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果; 百度多次查询文档,并没有发现可行的办法,最后是在微信的技术群里提出的问题,还好啊,三个...
  • 解决iframe在iphone不兼容的问题
  • 苹果Safari浏览器是无法通过iframe来唤起微信或支付宝APP支付的 但可以通过以下方法来完美解决iframe打开APP支付 1. 在iframe中的页面中JS代码: window.top.postMessage({ success: true, pay_url: pay_url }...
  • 解决iframe在移动端(主要iPhone)上的问题
  • < script type = "text/javascript" > setTimeout( ...//设置iframe里面body的宽高即可解决 $( "#iframe_tu" ).contents().find( "body" ).css( "width" , 780 );  }  }, 300 ); script >

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,492
精华内容 596
关键字:

苹果手机iframe