Home > Others

Implementing Cross-Domain access

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JavaScript cross-domain access is a common problem for web developers, what is a cross-domain, a script loaded on one domain Gets or operates document properties on another domain , and the following lists three ways to implement the JavaScript cross-domain approach:

1. Cross-domain implementation based on IFRAME

Cross-domain requirements based on IFRAME implementations two domains have aa.xx.com,bb.xx.com, which means that two pages must belong to one base domain (for example, xxx.com, or xxx.com.cn), using the same protocol (for example, HTTP) and the same port (for example, are all 80), so that in two pages simultaneously add document.domain, you can implement the parent page call the function of the child page, the code is as follows:
Page One:

HTML code
  2. <html>
  4. <head>
  6. <script>
  8. document.domain = "xx.com";
  10. function aa () {
  12. Alert ("P");
  14. }
  16. </Script>
  18. </head>
  20. <body>
  22. <iframe src= "http://localhost:8080/CmsUI/2.html" id="i">
  26. </iframe>
  28. <script>
  30. document.getElementById (' i '). onload = function () {
  32. var d = document.getElementById (' i '). Contentwindow;
  34. D.A ();
  38. };
  40. </Script>
  42. </Body>
  44. </html>


Page Two:

HTML code
  2. <html>
  4. <head>
  6. <script>
  8. document.domain = "xx.com";
  10. function A () {
  12. Alert ("C");
  14. }
  16. </Script>
  18. </head>
  20. <body>
  22. </Body>
  24. </html>


At this time, the parent page can invoke the a function of the child page, realize the JS cross-domain access

2. Cross-domain based on script tags

The script tag itself can access resources from other domains and is not subject to the browser's same-origin policy, and can be created by dynamically creating a script tag on the page as follows:

Java code
    1. var script = document.createelement (' script ');
    2. SCRIPT.SRC = "Http://aa.xx.com/js/*.js";
    3. Document.body.appendChild (script);



In this way, by dynamically creating the script tag can load the other domain JS file, and then through this page can invoke the function of the loaded JS file, the flaw is that can not load other domain documents, can only be JS file, JSONP is implemented in this manner, JSONP returns the callback parameter value and the JSON string as a JavaScript function by passing in a callback parameter to the other domain through the background of the other domain, because the request is made through the script tag. The browser will parse the returned string according to JavaScript, implementing the data transfer between domain and domain.
The support for JSONP in jquery is also based on this scenario.

Using Jsonp for cross-domain access reference addresses Good article: http://kb.cnblogs.com/page/139725/

In addition, there are

3. Using IFRAME and Location.hash

4, Window.name realization of cross-domain data transfer

5. Use HTML5 postMessage

6. Using Flash

Implementing Cross-Domain access

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
implementing definition domain access implementing interfaces in java implementing cisco ucs implementing class java implementing multiple interfaces cross domain cookies php

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More