Navigation in a WebView

Handling Framework7 Navigation Inside a WebView

Framework7 572,986 routes inside one page, so the WebView's canGoBack stays false and Back must go to the router, as the backButton listener of App Lifecycle does. That covers routable modals too: Back with the /about/ popup open closed it and returned to /. Modals opened from code are not routes, though. With an alert dialog open on a book's Notes tab, Back (adb shell input keyevent KEYCODE_BACK, between the two calls) navigated the page underneath and left the dialog on screen:

Output of 84

> app.dialog.alert('Note saved.', 'BookNest'), 'dialog'
"dialog"
> JSON.stringify({ url: app.views.main.router.currentRoute.url, ... })
"{\"url\":\"/\",\"history\":[\"/\"],\"modals\":1}"

A Back press should dismiss the topmost dialog, action sheet, sheet or popover first. Framework7 keeps each modal's instance on its element as f7Modal, so a short function can close whatever is on top unless the current route opened it, and the listener calls it first:

src/js/lab.js: Back closes a modal before it navigatesJavaScript

// Back closes the top dialog, action sheet, sheet or popover first, unless a route opened it
export function closeModal(f7) {
  const route = f7.views.current.router.currentRoute.route || {};
  if (['popup', 'sheet', 'popover', 'actions'].some((type) => route[type])) return false;
  const modal = [...document.querySelectorAll('.modal-in')].pop();
  if (!modal?.f7Modal) return false;
  modal.f7Modal.close();
  return true;
}

The first line of the backButton listener

    if (closeModal(f7)) return; // a dialog or sheet that is not a route (Section 4.12.5)

After a rebuild, the first Back closed the dialog and kept the page ("url":"/books/3/notes/","modals":0), and the second went home. Also open links to other sites with the Browser plugin (Browser), so they never replace the app inside the WebView.

MENU