如何根据url搜索参数更改页面内容？

如何解决如何根据url搜索参数更改页面内容？

我正在处理一个项目，其中包含从 Marzipano 工具 (https://www.marzipano.net/) 生成的大量 360 度图像（全景图）。我不想为每个要显示的全景图创建一个新的 HTML 文件，而是想在每个目录中使用一个 html 文件并根据 URL 搜索 id 更改全景图。当用户单击 href 链接时，我想使用搜索 ID 来指示将显示哪个全景图。我尝试使用 JS 中的搜索参数来做到这一点，但它并不总是正常工作，或者我做错了什么。在某些页面上，当我尝试通过单击 href 链接来显示全景图时出现空白屏幕。

index.js


    const searchUrl = window.location.search;
      const searchParams = new URLSearchParams(searchUrl);
    
      // display the initial scene.
      searchParams.forEach(function(value,key) {
        switchScene(scenes[value])
        console.log(value,key);

HTML href 链接

 

  <area alt="1" coords="134,375,164,405" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=0" shape="rect" target="_blank"/>
   <area alt="2" coords="171,355,201,385" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=1" shape="rect" target="_blank"/>
   <area alt="3" coords="176,318,206,348" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=2" shape="rect" target="_blank"/>
   <area alt="4" coords="177,282,207,312" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=3" shape="rect" target="_blank"/>
   <area alt="5" coords="177,247,277" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=4" shape="rect" target="_blank"/>
   <area alt="6" coords="125,267,155,297" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=5" shape="rect" target="_blank"/>
   <area alt="7" coords="77,269,107,299" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=6" shape="rect" target="_blank"/>
   <area alt="8" coords="28,265,58,295" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=7" shape="rect" target="_blank"/>
   <area alt="9" coords="38,332,68,362" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=8" shape="rect" target="_blank"/>
   <area alt="10" coords="87,329,117,359" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=9" shape="rect" target="_blank"/>

显示全景图的 HTML

´´´

<!DOCTYPE html>
<html>
 <head>
  <title>
   Project Title
  </title>
  <Meta charset="utf-8"/>
  <Meta content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
  <style>
   @-ms-viewport { width: device-width; }
  </style>
  <link href="vendor/reset.min.css" rel="stylesheet"/>
  <link href="style.css" rel="stylesheet"/>
 </head>
 <body class="multiple-scenes">
  <div id="pano">
  </div>
  <div id="sceneList">
   <ul class="scenes">
    <a class="scene" data-id="main-process-deck-mezz-1" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 1
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-2" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 2
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-3" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 3
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-4" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 4
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-5" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 5
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-6" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 6
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-7" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 7
     </li>
    </a>
    <a class="scene" data-id="main.process-deck-mezz-8" href="javascript:void(0)">
     <li class="text">
      Main Process Deck Mezz 8
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-9" href="javascript:void(0)">
     <li class="text">
       Main Process Deck Mezz 9
     </li>
    </a>
    <a class="scene" data-id="main-process-deck-mezz-10" href="javascript:void(0)">
     <li class="text">
       Main Process Deck Mezz 10
     </li>
    </a>
   </ul>
  </div>
  <div id="titleBar">
   <h1 class="sceneName">
   </h1>
  </div>
  <a href="javascript:void(0)" id="autorotatetoggle">
   <img class="icon off" src="img/play.png"/>
   <img class="icon on" src="img/pause.png"/>
  </a>
  <a href="javascript:void(0)" id="fullscreenToggle">
   <img class="icon off" src="img/fullscreen.png"/>
   <img class="icon on" src="img/windowed.png"/>
  </a>
  <a href="javascript:void(0)" id="sceneListToggle">
   <img class="icon off" src="img/expand.png"/>
   <img class="icon on" src="img/collapse.png"/>
  </a>
  <a class="viewControlButton viewControlButton-1" href="javascript:void(0)" id="viewUp">
   <img class="icon" src="img/up.png"/>
  </a>
  <a class="viewControlButton viewControlButton-2" href="javascript:void(0)" id="viewDown">
   <img class="icon" src="img/down.png"/>
  </a>
  <a class="viewControlButton viewControlButton-3" href="javascript:void(0)" id="viewLeft">
   <img class="icon" src="img/left.png"/>
  </a>
  <a class="viewControlButton viewControlButton-4" href="javascript:void(0)" id="viewRight">
   <img class="icon" src="img/right.png"/>
  </a>
  <a class="viewControlButton viewControlButton-5" href="javascript:void(0)" id="viewIn">
   <img class="icon" src="img/plus.png"/>
  </a>
  <a class="viewControlButton viewControlButton-6" href="javascript:void(0)" id="viewOut">
   <img class="icon" src="img/minus.png"/>
  </a>
  <script src="vendor/screenfull.min.js">
  </script>
  <script src="vendor/bowser.min.js">
  </script>
  <script src="vendor/marzipano.js">
  </script>
  <script src="data.js">
  </script>
  <script src="index.js">
  </script>
 </body>
</html>

´´´

black screen panorama

如何根据url搜索参数更改页面内容？

如何解决如何根据url搜索参数更改页面内容？

相关推荐