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

Question

This is probably a really silly question, but I can't find it online anywhere and I've been looking for at least an hour.

I have a link <a href="MusicMe.html" id="instrumentsNav">Instruments</a> which I want to get the ID of it once clicked, as I need to pass some variable to the page I am opening to know that the instruments link was clicked. This is being called from productInformation.html

I have also tried doing <a href="#" onclick="instrumentsClick()" id="instrumentsNav">Instruments</a> and then in my JavaScript, window.open("MusicMe.html", "_self"); and then tried passing a variable that way, but still absolutely no luck. Any help as to how I would pass a variable back to the page when it opens would be brilliant.

Once it opens, I am using the variable to set the ID of an element so it only displays a certain set of the information, which is working on it's own, but when I go back to try and call it, it's always thinking it is showing them all as I cannot work out how to set the variable to define it. Unfortunately I need to use JavaScript not PHP.

Thanks.

Answer 1

I would just tell you some ways, hope you would be able to implement it:

1. Use query params to pass the variable.

When you're navigating to another page, add query params to the url.

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

In your next page, check for queryParam by getting window.location.href and using regex to split the params after ? and get that data.

2. Use localStorage/cookies

Before navigating to the next page, set a variable in your localStorage

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

In your second page, in the window load event.

 $(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

You can use localStorage to keep the value, or use parameter like

href="MusicMe.html?id=111"

to pass the value to new page.

Answer 3

You can always pass a GET variable in you re URL just like this myhost.com?var=value You can get the value of this variable by parsing the URL using Js see this

How can I get query string values in JavaScript?

Answer 4

You can simply pass # value into url, get it and then match it with ' rel ' attribute given on specified element. Here I have done materialize collapsible open from link on another page.

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); 
   }
});