CODEWITHSUNDEEP
javascriptinputbox
Inptbx
Inptbx

Reputation: 29

Send data between input boxes in different pages

I would like to make an inputbox which sends the data to another inputbox in a new tab ( and a new page ) with a button or etc. I searched for it a lot ( url data transfer & ... ) but still have no idea . I appreciate any start point or sth. Thanks ! Edit : they are different sites with different domains. Edit 2 : I don't have any accesses to edit the receiver page.

Upvotes: 1

Views: 71

Answers (3)

vsync
vsync

Reputation: 130185

For cross-domain messaging I would suggest utilizing postMessage.

Browser support is fair enough, and the API is very very easy:

//create popup window
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');

//periodical message sender
setInterval(function(){
    var message = 'Hello!  The time is: ' + (new Date().getTime());
    console.log('blog.local:  sending message:  ' + message);
    myPopup.postMessage(message,domain); //send the message and target URI
},6000);

//listen to holla back
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://scriptandstyle.com') return;
    console.log('received response:  ',event.data);
},false);

The above example code was taken from this article by David Walsh.

Upvotes: 0

vsync
vsync

Reputation: 130185

until I know more, I would say localstorage is what you need here:

http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage/

So one window saves the data (using JSON.stringify) and the other window listens to the storage event and parsing that data using JSON.parse. Also, both window can send and receive together.

And more info here - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

And a demo page for 2 tabs - http://html5demos.com/storage-events

Upvotes: 1

Holybreath
Holybreath

Reputation: 413

You have millions of options.

You can pass with search parameters , hash, session storage...

Sender Fiddle

$('#send').on('click', function(e) { 
    window.open('http://jsfiddle.net/cnckfzpy/3/' + "?data=" + $("#sen").val(), "_blank")
});

Receiver Fiddle (Doesn't work, but the implementation is given)

$('#rec').val(window.location.search.split('data=')[1]);

Here is used the search parameter approach. but as I said, you have many options to choose from.

Upvotes: 1

Related Questions