JS cross-domain Problem solving solution

Source: Internet
Author: User

1, json-p cross-domain

Dynamic script injection method, through the script tag to introduce a JS file, this JS file loading success will execute our function specified in the URL parameters, and will we need to pass the JSON data as parameters. So JSONP is the server side of the page to do the corresponding match.

2, Window.name cross-domain

The Indow object has a Name property, which has a feature: that is, within the life cycle of a window All the pages loaded in the window are shared by a window.name, each page has read and write permissions to Window.name, Window.name is persisted on all pages loaded by a window and will not be reset due to the loading of the new page.
data size is limited, the size is generally 2m,ie and Firefox can be as large as 32M or so
There are three pages:
A.com/app.html: Application page.
a.com/proxy.html: Proxy file, which is usually an HTML file without any content, needs and applies the page under the same domain.
B.com/data.html: The page where the application page needs to get data, which 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 attaches the data to the window.name of the IFRAME, and the data.html code is as follows:

    1. <script type="text/javascript">
    2. window.name = ‘I was there!‘; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
    3. // 数据格式可以自定义,如json、字符串
    4. </script>

In the App page (a.com/app.html), listen for the onload event of the IFRAME, which sets the src of this iframe to the proxy file for the local domain (the proxy file and the app page are in the same field, so you can communicate with each other). The app.html section code is as follows:

  1. <script type="text/javascript">
  2. var state = 0,
  3. iframe = document.createElement(‘iframe‘),
  4. loadfn = function() {
  5. if (state === 1) {
  6. var data = iframe.contentWindow.name; // 读取数据
  7. alert(data); //弹出‘I was there!‘
  8. } else if (state === 0) {
  9. state = 1;
  10. iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件
  11. }
  12. };
  13. iframe.src = ‘http://b.com/data.html‘;
  14. if (iframe.attachEvent) {
  15. iframe.attachEvent(‘onload‘, loadfn);
  16. } else {
  17. iframe.onload = loadfn;
  18. }
  19. document.body.appendChild(iframe);
  20. </script>

Get the data to destroy this IFRAME, free memory, this also guarantees security (not by other domain frame JS access).

  1. <script type="text/javascript">
  2. iframe.contentWindow.document.write(‘‘);
  3. iframe.contentWindow.close();
  4. document.body.removeChild(iframe);
  5. </script>

In summary, the SRC attribute of the IFRAME is shifted from the domain to the local domain, and the cross-field data is transferred from the Window.name to the local domain by the IFRAME. This cleverly bypasses the browser's cross-domain access restrictions, but at the same time it is safe to operate.
Citation: http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html

3. The newly introduced Window.postmessage method in HTML5 cross-domain

The Window.postmessage (Message,targetorigin) method is a newly introduced feature of HTML5 that can be used to send messages to other window objects, regardless of whether the window object belongs to the same origin or different source, currently ie8+, Browsers such as FireFox, Chrome, and opera already support the Window.postmessage method.

The Window object that invokes the PostMessage method refers to the window object that receives the message, the first parameter of the method is the message to be sent, and the type can only be a string The second parameter, Targetorigin, is used to qualify the domain of the Window object that receives the message, and if you do not want to qualify the domain, you can use the wildcard character *.
Disadvantage is IE6, IE7 does not support

4, Iframe+document.domain to cross sub-domains

We just have to http://www.example.com/a.html and http://example.com/b.html the two pages of the document.domain are set to the same domain name can be. Note, however, that the document.domain setting is limited, and we can only set Document.domain to the parent domain of itself or higher, and the primary domain must be the same. For example: The document.domain of a document in a.b.example.com can be set to either a.b.example.com, b.example.com, or example.com, but cannot be set to C.a.b.example.com, because this is a subdomain of the current domain and cannot be set to baidu.com because the primary domain is already different.

JS cross-domain Problem solving solution

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.