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