猿问

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

我有一个页面调用主.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然后依靠该值打开相关的目标页面。


繁星coding
浏览 123回答 2
2回答

蛊毒传说

您可以在此处使用本地存储 .i.e: 保存 in 的 id 并使用 和 获取它到其他页面。a hreflocalStoragegetItemsetItem您将如下所示main.html<style>//making button look like a tag&nbsp; button {&nbsp; background: none!important;&nbsp; border: none;&nbsp; padding: 0!important;&nbsp; color: #069;&nbsp; text-decoration: underline;&nbsp; cursor: pointer;&nbsp; &nbsp;}</style>&nbsp; <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>&nbsp; <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>&nbsp; <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>&nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //^added onclick&nbsp; <script>&nbsp; &nbsp;function save(el){&nbsp; &nbsp; &nbsp; //getting id of href click&nbsp; &nbsp; &nbsp;var ids=el.getAttribute("id");&nbsp; &nbsp; &nbsp;console.log(ids);&nbsp; &nbsp; &nbsp;localStorage.clear();//clear previous data&nbsp; &nbsp; &nbsp;localStorage.setItem("ids", ids);//add data to storage&nbsp; &nbsp; &nbsp;var href=el.getAttribute("href");//get href&nbsp; &nbsp; &nbsp;console.log(href)&nbsp; &nbsp; &nbsp;window.open(href, '_blank');//open in blank page&nbsp; &nbsp; }&nbsp; </script>然后在你的做如下:central page&nbsp;function openDestination() {if (localStorage.getItem("ids") != null) {&nbsp; //get that value&nbsp; &nbsp; var ids= localStorage.getItem("ids");&nbsp; &nbsp; console.log(ids);&nbsp; }switch(ids) {&nbsp; &nbsp;case 1:&nbsp; &nbsp; &nbsp; window.open("https://www.mywebsite/DestinationA.html");&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp;case 2:&nbsp; &nbsp; &nbsp; window.open("https://www.mywebsite/DestinationB.html");&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp;case 3:&nbsp; &nbsp; &nbsp;window.open("https://www.mywebsite/DestinationC.html");&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp;case 4:&nbsp; &nbsp; &nbsp; window.open("https://www.mywebsite/DestinationD.html");&nbsp; &nbsp; &nbsp; break;&nbsp;//if none of those, close the window&nbsp; &nbsp;default:&nbsp; &nbsp; &nbsp; window.close();&nbsp; }}

米脂

您可以使用网址查询。这意味着您可以在页面之间传递小信息。示例:https://www.mywebsite/central.htm?id=1 稍后在中心页面上,您可以使用JS获取此ID,如下所示:const url = new URLSearchParams(window.location.search);const id= url.get('id')就个人而言,我认为这种方式更容易,更具可读性。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答