How to pass an array variable into a new window through javascript

Question

I am launching an html page when users click a button. I need to be able to pass in an array of addresses to the new window so that I can load them into a table, however I have been unable to find any way to pass an array over to the new window.

My most recent attempt looks like the following:

<button onclick="openWindow(['Joe Smith\n1 Address\nCity 12345',
  'Joe Smith\n2 Address\nCity 12345'])">Button</button>

function openWindow(addresses){
   var myWindow = window.open("NewPage.html");
   myWindow.addresses = addresses;
}

And then in NewPage.html I've got:

<script type="text/javascript">
   function bodyLoaded() { //gets called when the body loads
      var addresses;
      alert(addresses);
   }
</script>

I always get undefined in the alert on the new window. I did confirm that I am getting the addresses if I set up an alert in the openWindow() function.

I've tried several other things as well, including using localStorage (How to pass an array to a new page using javascript?) altho I don't know if I did it correctly. I also tried executing the function to load the table on the new window from the openWindow function (passing in the addresses variable) but I keep getting errors saying "Error: Object doesn't support property or method". For example:

function openWindow(addresses){
   var myWindow = window.open("NewPage.html");
   myWindow.loadTable(addresses); //the loadTable function exists in a .js file
}

Ideally I just want to pass a single array to the new window but I've been stuck on this for a while now. Any assistance or suggestions would be greatly appreciated.

if the new window is on the same domain you can get away with using LocalStorage for this — nicholaswmin
– nicholaswmin, Commented Nov 12, 2017 at 18:41
You are correct. localStorage did work. My issue was that I was using file:// instead of http://. localStorage apparently requires a web server (at least in my scenario). Thank you for the assistance. — Scott
– Scott, Commented Nov 13, 2017 at 14:13

Shawn Janas · Accepted Answer · 2017-11-12 18:47:20Z

4

One possibility is to pass the array of params as a query in the url. So something like this:

var myWindow = window.open("NewPage.html?addresses[0]=Joe Smith\n1 Address\nCity 12345&addresses[1]=Joe Smith\n2 Address\nCity 12345");

Then in javascript using this function

<script type="text/javascript">
   function bodyLoaded() { //gets called when the body loads
      var urlParams = new URLSearchParams(window.location.search);

      var addresses = urlParams.get('addresses'));
      alert(addresses);
   }
</script>

Edit:

Also localstorage works according to this answer: (How to pass an array to a new page using javascript?)

window.localStorage.setItem("cart", JSON.stringify(cart)); // Saving
var cart = JSON.parse(window.localStorage.getItem("cart")); // Retrieving

answered Nov 12, 2017 at 18:47

Shawn Janas

2,7532 gold badges16 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Over a year ago

Thank you for the suggestion. I was able to get this working with localStorage once I switched from file:// to http://. localStorage and sessionStorage were not working until I added a web server into the mix.

Alex Kudryashev · Accepted Answer · 2017-11-12 19:19:08Z

2

The new window is open by code so the code has some control over that window. Try something like this.

function openWindow(addresses) {
  var myWindow = window.open("newpage.html");
  myWindow.onload = function() {
    var myDiv = this.document.createElement('div');
    this.document.body.appendChild(myDiv);
    for (var i = 0, a; a = addresses[i]; ++i) {
      myDiv.innerHTML += a;
    }
  }
}

answered Nov 12, 2017 at 19:19

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

1 Comment

Scott Over a year ago

Thank you for the suggestion. I actually did try this at one point and it didn't work, but later found out that a lot of what I was trying to do wasn't working because I was using file:// instead of http://. I was able to get this working with localStorage once I switched over to http:// so I didn't go back to try this again, but thank you for the suggestion.

Collectives™ on Stack Overflow

How to pass an array variable into a new window through javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related