记一次移动端iframe嵌入导致的问题

justwe 阅读

之前接一个需求，是接入某国企扣费然后使用公司的业务。然后付费回调竟然是前端来做😂

在项目的订购页面嵌入某国企的iframe，然后iframe页面定位遮在页面顶层，在iframe中输入验证码等操作，父页面通过 postmessage 与iframe来获取支付状态。

ios端出现问题，浏览器默认在input聚焦的时候会将页面上推，将输入框展示在视口中心。然后问题来了。。。

问题

iframe中的input验证码聚焦将页面上推，点击获取验证码后iframe位置还原，然后iframe点击输入验证码竟然像是点到了下面的取消按钮，iframe关闭。。。然后发现整个页面还是保持上推的状态。

原因

猜想原因是因为iframe中input失焦并未将页面位置还原，然后浏览器计算事件的点击热区以页面上移的位置来计算，导致事件点击热区偏移。

思路

初步计划是input聚焦时不要让页面进行偏移

跨域的iframe无法自己加逻辑。。只能在页面中想办法，想来想去也没想到合适的办法，，只能加个定时器玩了😥

isCallUnicom (val) {
	if (val) {
		timer = setInterval(() => {
			document.body.scrollIntoView()
		}, 500)
	} else {
		clearInterval(timer)
	}
}

在 isCallUnicom 即iframe展示的时候每隔0.5秒强制让页面恢复到顶部的位置