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>
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>
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>
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.