How to send data from one window to another window?

Question

Could you please tell me how to send data from one window to another window? I have one button on my parent window. On click of that button I am moving to another page (There is success button present in another page). When I click success button on child or another window I am redirecting to parent window. I want to print "success" text on parent window.

http://plnkr.co/edit/6IRDD0DHxK6A7mExWOUP?p=preview

$(function() {
  $('#f').on('click', function() {       
    // alert('ddd');
    window.open('a.html')
  })

   $('#succ').on('click', function() {        
    // alert('succ');
    window.open('index.html')
  })
})

Possible duplicate of [Communication between tabs or windows](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) — Pablo Lozano, Jun 07 '17 at 07:15

Amrinder Singh · Answer 1 · 2017-06-07T07:30:58.823

0

Just do the following:

on your parent page add the following code:

$(document).ready(function() {
   var referrer =  document.referrer;    //to get previous url
   if(referrer == 'a.html'){
       alert("success");    // here i am showing an alert box with success message, you can print it inside a div or span as per your need.
   }
});

NOTE: on Plunker replace "if condition" with this one:

  if(referrer=='http://run.plnkr.co/Bwm0sBW4RRnrmWRA/a.html'){
       alert("success");    // here i am showing an alert box with success message, you can print it inside a div or span as per your need.
   }

and to send data along with it:

do something like this:
window.open('index.html','height=400, width=650, left=300, top=100, status=yes');
or
window.open("index.html?cid=hello");

That's it. :)

edited Jun 07 '17 at 07:30

answered Jun 07 '17 at 07:16

Amrinder Singh

5,300
12
46
88

which one is your parent page? a.html or index.html? – Amrinder Singh Jun 07 '17 at 07:21
parent is "index.html" from that I move to "a.html" ..From there I want to move "index.html" with success text – user944513 Jun 07 '17 at 07:23
can we send data ...username ? any obj ? and get object here – user944513 Jun 07 '17 at 07:26

score 0 · Answer 2 · answered Jun 07 '17 at 07:30

0

You can pass value to the html page through url parameter. just change your code in script.js file. Hope it will help you.

$(function() {
  $('#f').on('click', function() {
    window.open('a.html?id=' + 123)
 })
 $('#succ').on('click', function() {
   window.open('index.html?id=' + 1)
 })
})

then you can fetch the id value form params. Thank you

answered Jun 07 '17 at 07:30

biswajit-rout

377
2
11

To read the parameters from url: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript – Emanuele Spatola Jun 07 '17 at 07:37

Chirag Ravindra · Answer 3 · 2017-06-07T07:54:55.300

You can use the localStorage API to keep track of whether the button was clicked or not.

Whenever the user clicks on the button, add a new key (isClicked, for example) to the localStorage.

When the user lands on the main page, check to see if this flag is set. If set, show the success message.

<!-- index.html -->
<html>
  <body>
    <div id="result"></div>
    <button id="cta">GOTO Sub Page</button>
    <button id="clear">Clear Success</button>
    <script>
      window.onload = function(){
        var isClicked = localStorage.getItem("isClicked");
        if(isClicked){
          document.getElementById("result").innerHTML="Success";
        }
      }
      document.getElementById("cta").onclick=function(){
       window.open("sub-page.html");
      }
      document.getElementById("clear").onclick=function(){
        localStorage.removeItem("isClicked");
        document.getElementById("result").innerHTML="";
      }
    </script>
  </body>
</html>

<!--- sub=page.html -->
<html>
  <body>
    <div id="result"></div>
    <button id="cta">Activate Message</button>
    <script>
      document.getElementById("cta").onclick=function(){
        localStorage.setItem("isClicked","true");
        window.open("index.html");
      }
    </script>
  </body>
</html>

Sample Plunkr Implementation

PS: You can use localStorage to store/retrieve other page related values as well. You can even store JS objects by storing their string representations as given by JSON.stringify method

How to send data from one window to another window?

3 Answers3