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