test/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Import Map Overrides Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script>
      function loadTest(htmlFileName) {
        const testFrame = document.getElementById("testFrame");
        testFrame.src = `./${htmlFileName}`;

        document.getElementById("testTitle").innerText = htmlFileName;
      }

      function setUrlImportMap() {
        if (history.pushState) {
          const importMapOverrides = JSON.stringify({
            imports: { app1: "https://localhost:9543/app1.js" },
          });
          const newUrl = `${window.location.protocol}//${window.location.host}${
            window.location.pathname
          }?imo=${encodeURIComponent(importMapOverrides)}`;
          window.history.pushState({ path: newUrl }, "", newUrl);
        }
      }
    </script>

    <style>
      iframe {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h1>Current: <span id="testTitle">embedded-map</span></h1>
    <div>
      Select a test:
      <ul>
        <li>
          <a href="javascript:loadTest('embedded-map.html')">
            With embedded map
          </a>
        </li>
        <li>
          <a href="javascript:loadTest('no-map.html')">Without embedded map</a>
        </li>
        <li><a href="javascript:loadTest('server-map.html')">Server map</a></li>
        <li>
          <a href="javascript:loadTest('deny-list.html')">With deny list</a>
        </li>
        <li>
          <a href="javascript:setUrlImportMap(); loadTest('url.html');">
            From Url Query Param
          </a>
        </li>
      </ul>
    </div>
    <iframe id="testFrame" src="./embedded-map.html"></iframe>
    <iframe
      id="testFrame_cross_domain"
      src="http://localhost:3333/embedded-map.html"
    ></iframe>
  </body>
</html>