webivew 問題總結

• 解決 H5 ios input 聚焦，整個頁面被推上去，鍵盤收起頁面未下移bug

　　　 　方案一： 網上方法大多就只有 window.scrollTo(0, 0) ，會形成 input 失去焦點時就滾動到頂部了，這是不對的，並非全部狀況都要回頂部，因而本身寫了個適用所有場景的解決方案，而且添加後，全部文件生效~

 　　　　

　　　　(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener(

　　　　　　'blur',

    　　　　　event => {

           　　　　　　 // 當頁面沒出現滾動條時才執行，由於有滾動條時，不會出現這問題

            　　　　　　// input textarea 標籤才執行，由於 a 等標籤也會觸發 blur 事件

       　　　　　　 if (

           　　　　　　 document.documentElement.offsetHeight <=

            　　　　　　document.documentElement.clientHeight &&

            　　　　　　['input', 'textarea'].includes(event.target.localName)

       　　　　　　 ) {

           　　　　　　　　 document.body.scrollIntoView() // 回頂部

       　　　　　　 }

  　　　　　　  },

 　　　　   true

　　　　)

 

　　　　方案二：    focusout 含有事件冒泡    blur沒有事件冒泡，

                 　　　　特別是對input外面在包含有div時，建議監聽focusout事件

 

　　　　　　　　 export function isMobile() {

 　　　　　　　　     const ua = navigator.userAgent;

  　　　　　　　　    return /Android|webOS|iPhone|iPod|iPad|Macintosh|BlackBerry/i.test(ua);

　　　　　　　　}

 

　　　　　　　　export function isIos() {

  　　　　　　　　    const ua = navigator.userAgent;

 　　　　　　　　     return /iPhone|iPod|iPad|Macintosh/i.test(ua);

　　　　　　　　}

 

　　　　　　　　if (isIos()) {

  　　　　　　　　　document.body.addEventListener('focusout', () => {

    　　　　　　　　  　　var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

  　　　　　　　　　　    window.scrollTo(0, Math.max(scrollHeight - 1, 0));

 　　　　　　　　　　 });

　　　　　　　　}

 

• webview 和 客戶端交互，JSON傳值問題

 

    　　在和客戶端交互，通常都會處理成JSON字符串，若是此對象裏面包含了JOSN字符串時，在處理成JSON字符串，在傳輸給H5 時，前端拿到解析JSON 就會出錯，瀏覽器，會在傳輸過程當中，去掉一些轉譯\符號，

 

   　　 解決方法，若是是多層嵌套JSON ，那麼就客戶端就處理轉譯JSON幾回。

 

 

• H5 頁面 識別 是不是小程序環境

    

    　　在網頁內可經過window.__wxjs_environment變量判斷是否在小程序環境

 

 

• webview 裏面的H5 ，input 和textarea 等輸入框，獲取焦點時，滾動相應區域

 

   　　 onFocus={this.onScrollBottom}

 

   　　 onScrollBottom = () => {

        　　  if (isIOSApp()) {

               　　 const t = document.body.clientHeight;

              　　  window.scroll({ top: t, left: 0, behavior: 'smooth' });

        　　  }

   　　 }

 

 

• 子盒列表滾動到頂部 scrollIntoView

 

　　　　 handleScroll = () => {

 　　　　　　 const contentBox:any = document.getElementById('allContent');

 　　　　　　 contentBox.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })

　　　　}

 

　　　　<div className={styles.contentBox}>

 

  　　　　　　<div id={'allContent'}></div>

  　　　　</div>

 

 　　　　 <div className={styles.more}>加載更多&nbsp;<Icon type="down" size={'md'}/></div>

 

　　　　</div>