使用JavaScript打开另一个HTML页面时传递变量

Question

这可能是一个非常愚蠢的问题，但是我无法在任何地方在线找到它，而且我一直在寻找至少一个小时。

我有一个链接<a href="MusicMe.html" id="instrumentsNav">Instruments</a> ，我想在单击该链接后获取其ID，因为我需要将一些变量传递给我要打开的页面知道仪器链接被单击。 这是从productInformation.html调用的

我还尝试过<a href="#" onclick="instrumentsClick()" id="instrumentsNav">Instruments</a> ，然后在我的JavaScript中， window.open("MusicMe.html", "_self"); 然后尝试以这种方式传递变量，但绝对没有运气。 关于如何在打开变量时将其传递回页面的任何帮助都很棒。

一旦它打开，我就使用变量来设置元素的ID，因此它仅显示一组特定的信息，这些信息可以自己处理，但是当我回去尝试调用它时，它总是认为它是显示所有这些，因为我无法解决如何设置变量以对其进行定义。 不幸的是，我需要使用JavaScript而不是PHP。

谢谢。

Answer 1

我只想告诉您一些方法，希望您能够实现它：

1. 使用查询参数来传递变量。

导航到另一个页面时，将查询参数添加到URL。

window.open("MusicMe.html?variable=value", "_self");

在您的下一页中，通过获取window.location.href并使用regex在?之后拆分参数来检查queryParam ? 并获取数据。

2. 使用localStorage / cookie

导航到下一页之前，请在localStorage中设置一个变量

localStorage.setItem("variable","value");
window.open("MusicMe.html", "_self");

在第二页的窗口加载事件中。

 $(function() {
      if(localStorage.getItem("variable")) {

       // set the ID here
       // after setting remember to remove it, if it's not required
       localStorage.removeItem("variable");
      }

  });

Answer 2

您可以使用localStorage保留值，或使用类似

href="MusicMe.html?id=111"

将值传递到新页面。

Answer 3

您总是可以像这样myhost.com?var=value一样在URL中传递GET变量。您可以通过使用Js解析URL来获取此变量的值。

如何获取JavaScript中的查询字符串值？

Answer 4

您可以简单地将＃值传递到url中，获取它，然后将其与指定元素上提供的' rel '属性进行匹配。 在这里，我完成了另一页上的可折叠打开。

JS：

var locationHash = window.location.hash;
var hashSplit = locationHash.split('#');
var currentTab = hashSplit[1];
$('.collapsible > li').each(function() {
   var allRels = $(this).attr('rel');
   if(currentTab == allRels){
       $(this).find('.collapsible-header').addClass('active');  
       $(this).attr('id',currentTab); 
   }
});