直接进入正题
一、IOS的safari浏览器处理iframe有点特殊情况,在加载的dom中如果内容比较容器的iframe大,则会撑大容iframe,体验很不爽。无论是设置固定的大小,如width:100px,还是在其load完成后设置大小都是无效的。
以下两种解决办法:
1、设置样式和属性“width: 1px !important; min-width: 100%;" scrolling="no"”
<iframe style="width: 1px !important; min-width: 100%;" scrolling="no"></iframe>
优点简洁方便使用,缺点固定显示大小、无法滚动
2、在外层嵌套一个容器,并固定容器的大小,设置overflow:scroll
<div style="height:calc(100% - 40px);width:100%;border:none;overflow:scroll">
<iframe id="promotionFrame" style="height:100%;width:100%;border:none;" :src="selectedProduct.urlpath"></iframe>
</div>
当然缺点也是有的,多写了嵌套的html,但是内容可以正常滚动。
二、new Date()在safari浏览器中的兼容,无论iSO还是macOS中都会造成invalidDate错误。new Date(dateStr)中,dataStr格式不能有 -
(减号),例如 2019-10-30 21:32:32
。
故需要将-
替换为/
var times = '2019-10-30T21:32:32';
if (times.indexOf('T') > 0) {
times = times.replace('T', ' ');
}
times = times.replace(/-/g, "/");
var d = new Date(times);
console.log(d);