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.