Home > Web Front-end > JS Tutorial > JavaScript cross-domain summary: cross-domain data transmission implemented by window.name_javascript skills

JavaScript cross-domain summary: cross-domain data transmission implemented by window.name_javascript skills

WBOY
Release: 2016-05-16 15:34:28
Original
1238 people have browsed it

I tried it myself and it works really well. The specific implementation method is recorded as follows

There are three pages:

a.com/app.html: Application page.
a.com/proxy.html: Proxy file, usually 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 can be called a data page.

The basic steps to implement are as follows:

Create an iframe in the application 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!';  // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
                     // 数据格式可以自定义,如json、字符串
  </script>
Copy after login

Listen to the onload event of the iframe in the application page (a.com/app.html). In this event, set the src of this iframe to point to the proxy file of the local domain (the proxy file and the application page are under the same domain, so you 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;  // 读取数据
        alert(data);  //弹出'I was there!'
      } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://a.com/proxy.html";  // 设置的代理文件
      } 
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', loadfn);
    } else {
      iframe.onload = loadfn;
    }
    document.body.appendChild(iframe);
  </script>
Copy after login

Destroy the iframe after obtaining the data 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>
Copy after login

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 transferred from the external domain to the local domain by the window.name of the iframe. This cleverly bypasses the browser's cross-domain access restrictions, but at the same time it is a safe operation.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template