Javascript: three methods for implementing cross-origin access _ javascript skills

Source: Internet
Author: User
This article mainly introduces three methods for implementing cross-origin access in Javascript, including cross-origin based on iframe, cross-origin based on script tags, and background proxy, if you are interested, you can refer to the common problems that web developers encounter when accessing javascript cross-origin. What is cross-origin? The Script loaded on one domain gets or operates on the document attributes of another domain, three methods to implement javascript cross-origin are listed below:
1. implement cross-origin based on iframe
Cross-Domain implementation based on iframe requires that the two domains have the characteristics of aa.xx.com and bb.xx.com, that is, the two pages must belong to one basic domain (for example, both xxx.com and xxx.com.cn ), use the same protocol (for example, http) and the same port (for example, 80). In this way, add document. domain, you can call the sub-page function on the parent page. The Code is as follows:
Page 1:

   《script》   document.domain = "xx.com";   function aa(){    alert("p");   }  《script》        《script》  document.getElementById('i').onload = function(){    var d = document.getElementById('i').contentWindow;    d.a();      };   《script》    

Page 2:

    《script》   document.domain = "xx.com";   function a(){   alert("c");    }  《script》        

At this time, the parent page can call the function of the Child page to implement js cross-origin access.
2. implement cross-origin based on script tags
The script tag itself can access resources in other domains and is not restricted by the browser's same-source policy. You can dynamically create a script tag on the page. The Code is as follows:

var script = document.createElement('script'); script.src = "http://aa.xx.com/js/*.js?1.1.9"; document.body.appendChild(script); 

In this way, you can dynamically create a script tag to load js files in other domains, and then call the function of the loaded js file through this page, the defect in doing so is that documents in other domains cannot be loaded, but only js files can be used. jsonp is implemented in this way. jsonp passes a callback parameter to other domains, the callback parameter value and json string are packed into javascript Functions in the background of other domains to return the result. Because the request is sent through the script tag, the browser parses the returned string according to javascript, implements data transmission between domains.
Jsonp support in jquery is also based on this solution.
3. Background proxy
This method can solve all cross-domain problems, that is, to forward requests from other domains to the background of the domain, the background of this domain accesses other domains by simulating an http request, and then returns the returned results to the foreground. The advantage of this is that no matter the document is accessed, or JavaScript files can be implemented across domains.

The above three methods for implementing cross-origin access in js are divided into three parts for you first. You will surely gain some gains by studying them carefully.

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.