在不同页面的输入框之间发送数据

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.