When the H5 page is redirected in IOS WeChat, the bottom toolbar will appear, obscuring the content at the bottom of the page

Problem Description:
Open the H5 page in IOS WeChat. When the url history is generated by the redirect in the browser, a toolbar with forward and back buttons will appear at the bottom of the page, which will obscure the content at the bottom of the page.

Analyze the reasons:
When the page jumps, the WeChat browser reads the browsing history through window.history. At this time, a toolbar with forward and back buttons will be displayed at the bottom of the page, causing the content at the bottom of the page to be obscured. But refresh the page, it will not be blocked. The toolbar at the bottom is rendered after the page is rendered.

solution:

Do not generate history so that the bottom toolbar does not appear

Due to unauthorized code, the session history cannot be cleared, and the back/forward function cannot be disabled. The quickest available way is to use the location.replace() method, which provides the specified URL to replace the current session history.

1. Replace push with replace refers to push->replace from the first page to the second page, and the other pages remain unchanged.

   Actually, the middle page and tencent/camp-launch-app plug-ins are used in the IOS jump app store, and window.location.href = url jump is used, which is not used.

2. Generate historical records on the first interface: You can add another page before jumping to the first page. This page does not require content to jump directly.

   In actual applications, generating historical records on the first page is not the optimal solution and has not been adopted.

3. Before the page loads, by actively adding empty history records, the browser’s history monitoring mechanism is triggered, allowing the browser to call up the bottom toolbar before the page, thereby solving the occlusion problem.

   Add the processing of window.history in the routing guard:

router.beforeEach((to, from, next) => {
    window.history.replaceState(null, null, window.location.href);
    next();
});

replaceState is to replace the previous record in the browsing history and replace the previous record with the address of the current page. In essence, the browsing history is unchanged.
After testing, only IOS 6 Plus takes effect.

Reason: After adjusting to the next page in IOS WeChat, the url modified on the previous page is not kept in the history record.
eg: Returning to the previous page does not return to http://www.a.com?time=xxx , but returns to http://www.a.com .

After the bottom toolbar appears, get the page height or reposition

The appearance of the navigation bar at the bottom of IOS will cause the page height to change. You can use onresize to monitor the page size change, and reset the abnormal layout flow elements after the height changes.

function resizeHeight(e, delay = 200){ // delay = 200ms仅供参考，若还出现问题可增加时间延迟
    let resizeTimeout;
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            let navBar = document.getElementsByClassName("component-tab-bar-box")[0]; //此类即为非正常布局流元素
            let bottom = navBar.style.bottom;
            navBar.style.bottom = parseInt(bottom) ? 0 : 1 + 'px';
        }, delay);
    }
}
window.onresize = resizeHeight;

But the delay time is not easy to determine and has not been adopted.

Use the pageshow event in IOS WeChat to determine whether the page needs to be refreshed

When the H5 page is clicked on the back button in the IOS WeChat built-in browser to return to the previous page, the previous page will not be refreshed. In the browser cache mechanism, in the operation of returning to the previous page, dynamic and static resources such as html/js/css/interface will not be re-requested, but js will be reloaded. But in the IOS WeChat page, js will also save the last executed state of the previous page, and will not re-execute js.

Browser Forward/Forward Cache (BF Cache) is a browser optimization. The HTML standard does not specify how to cache, so the cache behavior is different for each browser.

pageshow: When a session history is executed, it will trigger a pageshow event. (This includes the back/forward button operations, and it will also be triggered when the page is initialized after the onload event is triggered).

window.addEventListener('pageshow', function(event) {
    // event.persisted: Boolean类型，表示网页是否是来自缓存。
});

pageshow compatibility:

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	4	1.5 (1.8)	11	15	5

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.3	?	11	35	5.1

The type value of performance.navigation is 2, when the page is accessed through history and forward and backward.
That is: window.performance.navigation.type === 2

performance.navigation compatibility:

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	10	12	7	9	15	8

Feature	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on ios	Samsung Internet
Basic support	<= 37	18	7	No	9	1.0

if (isWxH5 && Utils.isIos()) {
    window.onpageshow = function(e) {
        if(e.persisted || (window.performance && window.performance.navigation.type == 2)) {
            window.location.reload()
        }
    }
}

The pageShow event will be triggered when the page is displayed, regardless of whether the page comes from BF Cache. It can be judged whether there is BF Cache behavior by detecting the persisted attribute. The WeChat page in IOS supports the pageShow method, persisted attribute, and performance.navigation attribute.

Reference article:

1. IOS WeChat problem 1 The bottom navigation bar causes the label position to shift
2. new version of iOS WeChat bottom toolbar occlusion problem is perfectly solved
3. Ios WeChat page returns to the previous page to remove the cache several common ideas
4. iOS device WeChat h5 page rollback content does not refresh the problem
5. iOS WeChat bottom return to the horizontal bar question
6. h5 return to the previous page ios phone page does not refresh
7. WeChat page entry file is cached solution