使用JavaScript在两个HTML页面之间传递消息

Question

I have two HTML pages: source.html and dest.html

• In source.html, I create some buttons (start, stop, pause ...)
• In dest.html, I create a simple clock.

Whenever I click on one of these buttons, the source will send a message to dest. After being processed, the result (based on which button was pressed) will be sent back to the source. I tried iframe, but it did not work for me. Are there any suggestions that do not use the client-server model?

Answer 1

There is no way to do that if the windows are independent (without requests to server). If the both windows aren't of any kind of frames. Because of security reasons.

But if you create dest.html window from source.html, you can use created the window's variable ( window.open ) to manage it and OPENER object to manage source.html window.

Answer 2

There are 2 ways to send the message.

1. In source create a form which submits to dest.html, make sure the method is 'GET'

2. On click of the button set the value of the message and submit the form

   // something like document.getElementById('message').value = 'HELLO'; document.getElementById('form').submit();

2a. You dont need to make the form, you can just redirect with hardcoded url on the source.html button click like

window.location = 'dest.html?message=somemessage';

1. On submit the dest.html file will open, with the message available in the URL of the page

   var url = window.location+"";

   // if there are multiple parameters you will have to loop and store them in array for single you can use

   var message = url.substr((url.indexOf('=')+1)); alert(message);

2nd Method Not tried, store them in cookies when button gets clicked on source.html and read the cookies in dest.html

Answer 3

Actually, you can. Try to use the window.postMessage() method. Plus, you will need to create an event listener if you want to post some message back.

Please follow the steps in this referrence