How to Use postMesssage () to transfer information between cross-origin iframe pages _ javascript skills

Source: Internet
Author: User
The following section provides an information transfer method for cross-domain iframe pages using postMesssage. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at the limitations of the same-origin web policy. When cross-origin iframe links are used on pages, the home page and subpages cannot interact, this caused a lot of trouble for information transmission between pages. After a series of attempts, I found that the following methods can be implemented:

1. parameter passing through the subpage url

Simply put, add all parameters to the url with the same source as the home page, redirect the child page to the url, and then obtain these parameters through the src of iframe on the home page.

The process is very complex. We do not recommend this method.

2. postMessage ()

PostMesssage () is an event-based message transmission API provided by html5. it can deliver messages across text files, windows, and cross-origin.

The postMessage (data, origin) method accepts two parameters.

1. data: The data to be transmitted. The html5 specification mentions that this parameter can be any basic type or replicated object of JavaScript. However, not all browsers have done this, some browsers can only process string parameters, so we need to use JSON when passing parameters. the stringify () method serializes object parameters. Similar effects can be achieved by referencing json2.js in earlier versions of IE.

2. origin: string parameter, indicating the source of the target window. Protocol + host + port number [+ URL], the URL will be ignored, so you can leave it empty. this parameter is for security consideration, postMessage () the method will only pass the message to the specified window. If you want to, you can also set the parameter to "*", so that the message can be passed to any window, if you want to specify the same source as the current window, set it "/".

Send message (subpage)

function sendMessage(param) {  var url;  if (param.url) {    url = param.url;  };  var dataJson = JSON.stringify({     type:1,      a: param.c,    b: param.c,    c: param.c,    url: url  });  window.parent.postMessage(dataJson, '*');}

Because some browsers can only process string parameters, we need to useJSON. stringfy ()Convert the parameter to a string, and then use JSON. parse () to convert it back to the object on the receiving page.

Receive messages

For the parameters passed on the sub-page, we can obtain them by listening to the message event of the window:

Window. addEventListener ('message', function (e ){
Var data = JSON. parse (e. data );
Switch (data. type ){
Case 1:
Alert (data. a); break;
}
}, False );

Message events have several important attributes.

1. data: as the name suggests, it is the message passed.
2. source: The Window object for sending messages
3. origin: Source of the message sending window (Protocol + host + port number)
You can use the postMesssage () method and message event to transmit messages across domains. Note that in the demo, we transmit messages to the parent page through sub-pages, therefore, window is used. parent sending, window receiving:

Window. parent. postMessage (dataJson, '*'); if it is from the home page facing the subpage, you need to switch, use window to send, window. frames [0] to receive.

The above post-Use of postMesssage () to implement cross-origin iframe information transmission between pages is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for me.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.