为了账号安全,请及时绑定邮箱和手机立即绑定

如何在脚本中获取 href id 值,并依赖于 id 值来打开相关页面

如何在脚本中获取 href id 值,并依赖于 id 值来打开相关页面

繁星coding 2022-09-23 14:53:23

我有一个页面调用主.html,它包括多个网址,这些网址将转到一个名为central.htm的页面。中央.htm有一个按钮,该按钮将打开目标页面,具体取决于URL。

我读了这篇文章,采取id值,但我不明白找到id的想法a href

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

(更新的代码)

 <!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>

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

运行代码后,如果我单击“第一个链接”按钮,它将转到目标 A。但是,如果我单击其他链接按钮(例如Thrid链接),它仍然会转到目标A。

由于我的网站的局限性,我目前无法使用jQuery,所以我专注于使用javascript。

请问中央.htm如何从main获取值.html然后依靠该值打开相关的目标页面。


查看完整描述

2 回答

?
蛊毒传说

TA贡献1552条经验 获得超3个赞

您可以在此处使用本地存储 .i.e: 保存 in 的 id 并使用 和 获取它到其他页面。a hreflocalStoragegetItemsetItem


您将如下所示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();

  }

}


查看完整回答
反对 回复 2022-09-23
?
米脂

TA贡献1514条经验 获得超3个赞

您可以使用网址查询。这意味着您可以在页面之间传递小信息。示例:https://www.mywebsite/central.htm?id=1 稍后在中心页面上,您可以使用JS获取此ID,如下所示:


const url = new URLSearchParams(window.location.search);

const id= url.get('id')

就个人而言,我认为这种方式更容易,更具可读性。


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信