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時，通知父窗體删除二維碼。（具體沒有嘗試過）

本文完〜