tsmd/prevent-history-back-dialog.html

## prevent-history-back-dialog.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Form</title>
  </head>
  <body>

    <p>
      URL: <input id="url" type="text" readonly style="width:60em">
    </p>
    <p>
      <button type="button" onclick="history.back()">Back</button>
      <button type="button" onclick="history.forward()">Forward</button>
    </p>
    <hr>
    <p>
      <label>
        Name
        <input type="text" name="name">
      </label>
    </p>
    <p>
      <button type="submit" disabled>Submit</button>
    </p>

    <p>
      <a href="#a">#a</a>
      <a href="#b">#b</a>
      <a href="#c">#c</a>
    </p>

    <dialog id="confirm">
      Are you sure?
      <form id="confirm-form" method="dialog">
        <button autofocus>No</button>
        <button>Yes</button>
      </form>
    </dialog>

    <script>
      function updateUrl() {
        document.getElementById("url").value = location.href;
      }
      updateUrl();
      window.addEventListener("hashchange", () => {
        updateUrl();
      });

      // Pushing dummy history
      if (!history.state?.pushed) {
        const currentState = { ...(history.state || {}) };
        history.replaceState({ ...currentState, fake: true }, "", location.href);
        history.pushState({ ...currentState, pushed: true }, "", location.href);
      }

      const confirm = document.getElementById("confirm");
      const confirmForm = document.getElementById("confirm-form");

      window.addEventListener("popstate", () => {
        if (!history.state?.fake) {
          return;
        }
        confirm.showModal();
      });

      confirmForm.addEventListener("submit", (e) => {
        switch (e.submitter.textContent) {
          case "Yes":
            window.removeEventListener("beforeunload", onBeforeUnload);
            history.back();
            break;
          case "No":
            history.forward();
            break;
        }
      });

      // Preventing closing tab or reload (no effect with iOS Safari)
      function onBeforeUnload(evt) {
        evt.preventDefault();
        evt.returnValue = true;
      }
      window.addEventListener("beforeunload", onBeforeUnload);
    </script>
  </body>
</html>

## prevent-history-back.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Form</title>
  </head>
  <body>

    <p>
      URL: <input id="url" type="text" readonly style="width:60em">
    </p>
    <p>
      <button type="button" onclick="history.back()">Back</button>
      <button type="button" onclick="history.forward()">Forward</button>
    </p>
    <hr>
    <p>
      <label>
        Name
        <input type="text" name="name">
      </label>
    </p>
    <p>
      <button type="submit" disabled>Submit</button>
    </p>

    <p>
      <a href="#a">#a</a>
      <a href="#b">#b</a>
      <a href="#c">#c</a>
    </p>

    <script>
      function updateUrl() {
        document.getElementById("url").value = location.href;
      }
      updateUrl();
      window.addEventListener("hashchange", () => {
        updateUrl();
      });

      // Pushing dummy history
      if (!history.state?.pushed) {
        const currentState = { ...(history.state || {}) };
        history.replaceState({ ...currentState, fake: true }, "", location.href);
        history.pushState({ ...currentState, pushed: true }, "", location.href);
      }

      window.addEventListener("popstate", () => {
        if (!history.state?.fake) {
          return;
        }
        const goAway = confirm("Are you sure?");
        if (goAway) {
          window.removeEventListener("beforeunload", onBeforeUnload);
          history.back();
        } else {
          history.forward();
        }
      });

      // Preventing closing tab or reload (no effect with iOS Safari)
      function onBeforeUnload(evt) {
        evt.preventDefault();
        evt.returnValue = true;
      }
      window.addEventListener("beforeunload", onBeforeUnload);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Form</title>
	</head>
	<body>

	<p>
	URL: <input id="url" type="text" readonly style="width:60em">
	</p>
	<p>
	<button type="button" onclick="history.back()">Back</button>
	<button type="button" onclick="history.forward()">Forward</button>
	</p>
	<hr>
	<p>
	<label>
	Name
	<input type="text" name="name">
	</label>
	</p>
	<p>
	<button type="submit" disabled>Submit</button>
	</p>

	<p>
	<a href="#a">#a</a>
	<a href="#b">#b</a>
	<a href="#c">#c</a>
	</p>

	<dialog id="confirm">
	Are you sure?
	<form id="confirm-form" method="dialog">
	<button autofocus>No</button>
	<button>Yes</button>
	</form>
	</dialog>

	<script>
	function updateUrl() {
	document.getElementById("url").value = location.href;
	}
	updateUrl();
	window.addEventListener("hashchange", () => {
	updateUrl();
	});

	// Pushing dummy history
	if (!history.state?.pushed) {
	const currentState = { ...(history.state \|\| {}) };
	history.replaceState({ ...currentState, fake: true }, "", location.href);
	history.pushState({ ...currentState, pushed: true }, "", location.href);
	}

	const confirm = document.getElementById("confirm");
	const confirmForm = document.getElementById("confirm-form");

	window.addEventListener("popstate", () => {
	if (!history.state?.fake) {
	return;
	}
	confirm.showModal();
	});

	confirmForm.addEventListener("submit", (e) => {
	switch (e.submitter.textContent) {
	case "Yes":
	window.removeEventListener("beforeunload", onBeforeUnload);
	history.back();
	break;
	case "No":
	history.forward();
	break;
	}
	});

	// Preventing closing tab or reload (no effect with iOS Safari)
	function onBeforeUnload(evt) {
	evt.preventDefault();
	evt.returnValue = true;
	}
	window.addEventListener("beforeunload", onBeforeUnload);
	</script>
	</body>
	</html>