Cross-domain solution (detailed)

window.name+iframe.contentWindow.name

There are three pages:

• a.com/app.html: The application page.
• a.com/proxy.html: The proxy file, generally an html file without any content, needs to be in the same domain as the application page.
• b.com/data.html: The page where the application page needs to obtain data, which can be called the data page.

The basic steps to achieve it are as follows:

1. Create an iframe in the app page (a.com/app.html) and point its src to the data page (b.com/data.html).
   The data page will append the data to the window.name of this iframe. The data.html code is as follows:

   <script type="text/javascript">
       window.name = 'I was there!'; // Here is the data to be transmitted, the size is generally 2M, and it can be as large as 32M under IE and firefox
                                        // The data format can be customized, such as json, string
   </script>

2. Listen to the onload event of the iframe in the application page (a.com/app.html), in this event, set the src of the iframe to point to the proxy file of the local domain (the proxy file and the application page are in the same domain, so they can communicate with each other) . Part of the code in app.html is as follows:

   <script type="text/javascript">
       var state = 0,
       iframe = document.createElement('iframe'),
       loadfn = function() {
           if (state === 1) {
               var data = iframe.contentWindow.name; // read data
               alert(data);    //弹出'I was there!'
           } else if (state === 0) {
               state = 1;
               iframe.contentWindow.location = "http://a.com/proxy.html"; // set proxy file
           }  
       };
       iframe.src = 'http://b.com/data.html';
       if (iframe.attachEvent) {
           iframe.attachEvent('onload', loadfn);
       } else {
           iframe.onload  = loadfn;
       }
       document.body.appendChild(iframe);
   </script>

3. After obtaining the data, destroy the iframe and release the memory; this also ensures security (not accessed by other domain frame js).

   <script type="text/javascript">
       iframe.contentWindow.document.write('');
       iframe.contentWindow.close();
       document.body.removeChild(iframe);
   </script>

To sum up, the src attribute of the iframe is transferred from the external domain to the local domain, and the cross-domain data is passed from the external domain to the local domain by the iframe's window.name. This cleverly bypasses the browser's cross-domain access restrictions, but at the same time it is a safe operation.

postMessage cross-domain
postMessage is an API in HTML5 XMLHttpRequest Level 2, and is one of the few window attributes that can be operated across domains. It can be used to solve the following problems:
a.) Data transfer between pages and new windows that they open
b.) Message passing between multiple windows
c.) Page and nested iframe message passing
d.) Cross-domain data transfer usage in the above three scenarios

: The postMessage(data, origin) method accepts two parameters
data: html5 specification support Any basic type or copyable object, but some browsers only support strings, so it is best to use JSON.stringify() to serialize when passing parameters.
origin: protocol + host + port number, it can also be set to "*", which means that it can be passed to any window. If you want to specify the same origin as the current window, set it to "/".

1.) a.html: (http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display :none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: '

        // Send cross-domain data to domain2
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };
    // Accept domain2 return data
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);

</script>

2.）b.html：(http://www.domain2.com/b.html)
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>