Recently, I encountered a webView return problem in the project. I think it is more valuable. I will record it here.

The problem

The requirement is to open the single-page application of VUE with WebView in the Android client APP. In the VUE application, routing is managed by itself. Click the back button in the navigation bar every time to return to the page where the original WebView is opened, click the back button again. Calling the clientapi.goback () method provided by the client destroys the WebView and returns to the page where the client app is located.

In this VUE application, there are five pages A, B, C, D and E, which can jump to each other. Each page may be the first page when the client APP opens the WebView. Call clientapi.goback () : clientapi.goback () : clientapi.goback () : clientapi.goback () : clientapi.goback () : clientapi.goback () :

Finding a solution

I tried calling router.back() on the C page and got nothing. Of course, this is JS code and destroying the WebView is beyond its authority. There is no clue in route or Router that the current page is the same as the one on which the WebView was opened. Try to find a clue in window.history.

Window.history has three properties:

  • length
  • scrollRestoration
  • state

The first two don’t work, so try state.

Note that window.history.state is a different value after each route change, for example:

{
    key: "icgo4i".state: undefined
}
Copy the code

The initial page’s window.history.state may be null, or it may be an object like the one above. It is found that the value of window.history.state of the same page is different in different routing opportunities. For example, the value of window.history.state of page A is:

{
    key: "icgo4i".state: undefined
}
Copy the code

If you jump to page B, B to page C, and then C to page A, then the value of window.history.state of page A is:

{
    key: "0yfpsb".state: undefined
}
Copy the code

The value is different from the previous A page.

Back () or window.history. Back () is called from page A to return to the original page A, where window.history.

{
    key: "icgo4i".state: undefined
}
Copy the code

As you can see, it’s the same value as before.

The solution

The solution to the problem is window.history.state, which can be used to determine whether the current page is the same page when the WebView was opened. The steps are as follows:

  • After loading h5 APP, record the current pagewindow.history.state
  • Each time the call clicks the back button in the upper left corner, the current page is judgedwindow.history.stateIs the same as the recorded value
  • If so, callclientApi.goBack(), otherwise callrouter.back()

Reference code

vueVersion reference code is as follows:

// store state: { initialHistoryStateStr: '', } mutations: { setHistoryInitialStateStr(state: State, initialHistoryStateStr: string) { state.initialHistoryStateStr = initialHistoryStateStr; }, } // common.js if (store.state.initialHistoryStateStr === JSON.stringify(window.history.state)) { clientApi.goBack();  } else { router.back(); } // App created() { this.$store.commit('setHistoryInitialStateStr', JSON.stringify(window.history.state)); window.handleClientGoBack = () => { common.goBack(); }; clientApi.on('back', handleClientGoBack'); // Listen to the client physical return button}Copy the code

nativejsVersion reference code is as follows:

window.addEventListener('load'.function() {
	window.__initialHistoryStateStr = JSON.stringify(window.history.state);
}, false);

const common = {
	back() {
		const nowHistoryStateStr = JSON.stringify(window.history.state);
		if (nowHistoryStateStr === window.__initialHistoryStateStr) {
			clientApi.goBack();
		} else {
			window.history.back(); }}}window.handleClientGoBack = (a)= > {
  common.goBack();
};
clientApi.on('goBack'.'handleClientGoBack');  // Listen to the client's physical return button click
Copy the code