Html pass data to new window using javascript

Question

I need to pass some JavaScript object to the new window opening. Below code works fine when I open page in new tab.

              var url = "http://page1.html";
              var win = window.open(url, "_blank");
              win.myData = myData;
              win.focus();

And I am able to access the data on page1.html using

            var data = window.opener.myData;

But if opens the page in same tab using

              var win = window.open(url, "_self");

This method not works. I am getting TypeError: Cannot read property 'myData' of null on second page.

How can I pass the data when open the new page in same tab.

You're going to have to use something like localStorage to do that. — goto
– goto, Commented Jul 16, 2020 at 11:32
Does this answer your question? Javascript: sharing data between tabs — goto
– goto, Commented Jul 16, 2020 at 11:42
You can use localStorage (as said above), cookies, query strings. Look at this question, there is a lot of explanation: stackoverflow.com/questions/29986657/… — gulima
– gulima, Commented Jul 16, 2020 at 11:50

FishSaidNo · Accepted Answer · 2020-07-17 05:36:14Z

As comments suggested you could use a form of persistent storage such as a cookie or localStorage. However these may be blocked/disabled by the user via browser settings.

Passing your data as a query parameter appended to the url would seem the most straightforward and reliable option. There are considerations regarding this method, such as the maximum permissable length of a url; and privacy - urls will be stored in browser history, logged by the ISP etc.

The data will also need to be in a url-safe format. You can use encodeUriComponent for this, perhaps encoding it as a base64 string beforehand to avoid having the plaintext data in the url.

var data = {
    thing: 'something here',
    otherThing: [{ name: 'zoo', size: 1 }, { name: 'far', size: 9001 }]
};

var dataString = JSON.stringify(data);
var dataStringBase64 = window.btoa(dataString); // (optional)
var dataStringBase64Safe = encodeURIComponent(dataStringBase64);

var url = 'https://example.com?data=' + dataStringBase64Safe;
window.open(url, '_self');

On the new page (grabbing the desired query param, then reversing the steps):

var urlParams = new URLSearchParams(window.location.search); // supported on most modern browsers
var dataStringBase64Safe = urlParams.get('data');

var dataStringBase64 = decodeURIComponent(dataStringBase64Safe);
var dataString = window.atob(dataStringBase64);
var data = JSON.parse(dataString);
console.log(data);

Asanka · Accepted Answer · 2020-07-17 06:14:00Z

1

What about using Data URLs, with base64 encoded data,

ex:

var string = JSON.stringify({
name: "x",
age: 23
});

// Encode the String
var encodedString = btoa(string);
console.log(encodedString);

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs:  "{"name":"x","age":23}"

this way you can send even a image How to decode data:image/png:base64... to a real image using javascript

Read on Data Urls

answered Jul 17, 2020 at 6:14

Asanka

6281 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Html pass data to new window using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related