CODEWITHSUNDEEP
javascripthtmljsonformsclick
Jeya Suriya Muthumari
Jeya Suriya Muthumari

Reputation: 2021

Javascript page: Open a new tab for another website page with JSON object

I have two websites in the same domain, mydomain.com.

https://firstSite.mydomain.com

https://seconSite.mydomain.com

I have a webpage called display in firstSite, https://firstSite.mydomain.com/display.

Similarly I have a webpage called create in seconSite, https://seconSite.mydomain.com/create.

When a click event happens in the seconSite, create html view, I need to open a new tab to show the firstSite/display page.

On opening the firstSite/display from seconSite/create, I have to transfer my JSON object, which is not small. It's minimum length would be >5000, So it is difficult to transfer via URL params,

Is it possible, to open a new tab to load the https://firstSite.mydomain.com/display from https://seconSite.mydomain.com/create on click event with large JSON object?

Is there a way to do it without involving DB to store the JSON somewhere and retrieve it back?

Upvotes: 1

Views: 321

Answers (1)

dhudson
dhudson

Reputation: 571

You can use Window.postMessage

something like

JS for /create:

clickElement.addEventListener('click', (e) => {
  e.preventDefault();
  displayWindow = window.open('https://firstSite.mydomain.com/display');
  displayWindow.postMessage(jsonObject, '*');
});

JS for /display

window.addEventListener('message', (event) => { console.log(event.data); });

this is the gist... it may not be copy/paste code but should get you most of the way there. There are some other implementation details (setting/checking origin, messaging back to /create, etc.) that you may want to do. You can find those details in the links below.

  1. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  2. https://developer.mozilla.org/en-US/docs/Web/API/Window/open
  3. https://developer.mozilla.org/en-US/docs/Web/API/Window/opener

Upvotes: 2

Related Questions