IOS Ionic Iframe 页面会闪烁问题

最新推荐文章于 2019-07-04 16:18:40 发布

心中翼

最新推荐文章于 2019-07-04 16:18:40 发布

阅读量2.8k

点赞数 1

分类专栏：前端 Ionic 文章标签： ios Html5 Ionic Iframe

本文链接：https://blog.csdn.net/XinZhongYi/article/details/55188601

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Ionic

6 篇文章 0 订阅

订阅专栏

在IOS端的Iframe页面，src为外部链接时，页面向下滑动会出现闪动现象。

当滑动到中部或者下部时会突然跳转到页面顶部。

1、Iframe不能滑动解决办法:Iframe外层包裹一层DIV,设置-webkit-overflow-scrolling:touch;overflow:auto；

<div style="height:100%;-webkit-overflow-scrolling:touch;overflow:auto">
<iframe id="homepageIframe" sandbox="allow-scripts" ng-src="{{vm.paySrc}}" class="has-header" style="min-width:100%;max-width:100%;height:100%;width: 100%;"
></iframe>
   <div>

2、Iframe滑动到底部闪烁现象解决办法:在iframe页面加载完成后，获取加载的外部链接的body高度设置Iframe的高度

var homepageIframe = document.getElementById("homepageIframe");
homepageIframe.onload = function () {
	var iframeHeight = $("#homepageIframe").contents().find("body").height();
	$("#homepageIframe").height(iframeHeight); 
};