如何在JavaScript中获取href值并取决于id值打开相关页面

初学者

我有一个页面调用main.html，它包含多个URL，这些URL将转到名为central.htm的页面。central.htm具有一个按钮，该按钮将根据URL打开目标页面。

我读了这篇带有id值的帖子，但我不知道有关找到a hrefid的想法

我<a href>在main.html中应用ID，并在central.htm中使用javascript。但是我不确定是否可以这样做，因为我尝试了以下代码，但是它不起作用。

（更新的代码）

  <!DOCTYPE HTML>  
<html>  
<head>  
    <title>  
        this is main.html 
    </title> 
</head>  

<body>
<style>
//making button look like a tag
button {
background: none!important;
border: none;
padding: 0!important;
color: #069;
text-decoration: underline;
 cursor: pointer;
}
</style>

<button href="https://www.mywebsite/central.htm" id="1" onclick="save(this)">First link will go to the central page first and then go to Destination A</button>
<button href="https://www.mywebsite/central.htm" id="2" onclick="save(this)">Second link will go to the central page first and then go to Destination B</button>
<button href="https://www.mywebsite/central.htm" id="3" onclick="save(this)">Thrid link will go to the central page first and then go to Destination C</button>
<button href="https://www.mywebsite/central.htm" id="4" onclick="save(this)">Fourth link will go to the central page first and then go to Destination D</button>
                                                    //^added onclick
<script>
function save(el){
  //getting id of href click
 var ids=el.getAttribute("id");
 console.log(ids);
 localStorage.clear();//clear previous data
 localStorage.setItem("ids", ids);//add data to storage
 var href=el.getAttribute("href");//get href
 console.log(href)
 window.open(href, '_blank');//open in blank page
}

</script>
</body>
</html>

然后所有链接都转到中心页面，中心页面确定链接，然后打开相关的目标

（更新的代码）

<!DOCTYPE HTML>  
<html>  
<head>  
    <title>  
        this is central.htm 
    </title> 
</head>  
<script type="text/javascript">
 function openDestination() {
 if (localStorage.getItem("ids") != null) {
//get that value
 var ids= localStorage.getItem("ids");
 console.log(ids);
}
switch(ids) {
case 1:
  window.open("https://www.mywebsite/DestinationA.html");
  break;
case 2:
  window.open("https://www.mywebsite/DestinationB.html");
  break;
case 3:
 window.open("https://www.mywebsite/DestinationC.html");
  break;
case 4:
  window.open("https://www.mywebsite/DestinationD.html");
  break;
 //if none of those, close the window
default:
  window.close();
}
}
</script>

<body>
<p>Click the button and it will open the destination page</p>
<p><input id="clickMe"  onclick="openDestination()" type="button" value="click to open destination" /></p>
</body>
</html>

运行代码后，如果单击“第一个链接”按钮，它将转到“目标A”。但是，如果单击“其他链接”按钮（例如“ Thrid”链接），则仍将转到“目标A”。

由于我的网站的限制，我目前无法使用jQuery，因此我专注于使用javascript。

请问central.htm如何从main.html获取值，然后根据该值打开相关的目标页面。

参考

https://www.geeksforgeeks.org/how-to-get-the-id-of-the-clicked-button-using-javascript-jquery

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

斯瓦蒂

您可以在此处使用localStorage。即：使用和保存a hrefin的IDlocalStorage并在其他页面中获取它。getItemsetItem

您main.html将如下图所示

<style>
//making button look like a tag
  button {
  background: none!important;
  border: none;
  padding: 0!important;
  color: #069;
  text-decoration: underline;
  cursor: pointer;
   }
</style>

  <button href="https://www.mywebsite/central.htm" id="1" onclick="save(this)">First link will go to the central page first and then go to Destination A</button>
  <button href="https://www.mywebsite/central.htm" id="2" onclick="save(this)">Second link will go to the central page first and then go to Destination B</button>
  <button href="https://www.mywebsite/central.htm" id="3" onclick="save(this)">Thrid link will go to the central page first and then go to Destination C</button>
  <button href="https://www.mywebsite/central.htm" id="4" onclick="save(this)">Fourth link will go to the central page first and then go to Destination D</button>
                                                        //^added onclick
  <script>
   function save(el){
      //getting id of href click
     var ids=el.getAttribute("id");
     console.log(ids);
     localStorage.clear();//clear previous data
     localStorage.setItem("ids", ids);//add data to storage
     var href=el.getAttribute("href");//get href
     console.log(href)
     window.open(href, '_blank');//open in blank page
    }

  </script>

然后在您的central page操作中如下所示：

 function openDestination() {
if (localStorage.getItem("ids") != null) {
  //get that value
    var ids= localStorage.getItem("ids");
    console.log(ids);
  }
switch(ids) {
   case 1:
      window.open("https://www.mywebsite/DestinationA.html");
      break;
   case 2:
      window.open("https://www.mywebsite/DestinationB.html");
      break;
   case 3:
     window.open("https://www.mywebsite/DestinationC.html");
      break;
   case 4:
      window.open("https://www.mywebsite/DestinationD.html");
      break;
 //if none of those, close the window
   default:
      window.close();
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。