Three ways to achieve cross-domain access in js_javascript skills-JS Tutorial-php.cn

Three ways to achieve cross-domain access in js_javascript skills

WBOY

Release： 2016-05-16 15:26:51

Original

1697 people have browsed it

Javascript cross-domain access is a problem that web developers often encounter. What is cross-domain? A script loaded on one domain obtains or operates document attributes on another domain. Three methods for implementing JavaScript cross-domain are listed below. :
1. Cross-domain implementation based on iframe
Cross-domain implementation based on iframe requires that the two domains have the characteristics of aa.xx.com, bb.xx.com, that is, the two pages must belong to a basic domain (for example, both xxx.com, or xxx .com.cn), use the same protocol (for example, both are http) and the same port (for example, both are 80). In this way, adding document.domain to both pages at the same time can realize the function of the parent page calling the child page. The code is as follows :
Page 1:

<html> 
<head> 
 <script> 
  document.domain = "xx.com"; 
  function aa(){ 
   alert("p"); 
  } 
 </script> 
</head> 
<body> 
  <iframe src="http://localhost:8080/CmsUI/2.html" id="i"> 
   
  </iframe> 
  <script> 
 document.getElementById('i').onload = function(){ 
   var d = document.getElementById('i').contentWindow; 
   d.a(); 
    
 }; 
  </script> 
 </body> 
</html>

Copy after login

Page 2:

<html> 
 <head> 
 <script> 
  document.domain = "xx.com"; 
  function a(){ 
  alert("c"); 
   } 
 </script> 
 </head> 
 <body> 
 </body> 
</html>

Copy after login

At this time, the parent page can call the a function of the child page to achieve js cross-domain access
2. Cross-domain implementation based on script tags
The script tag itself can access resources in other domains and is not restricted by the browser's same-origin 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"; 
document.body.appendChild(script);

Copy after login

In this way, js files from other domains can be loaded by dynamically creating script tags, and then the function of the loaded js file can be called through this page. The disadvantage of this is that documents from other domains cannot be loaded, only js files. jsonp is implemented in this way. jsonp passes a callback parameter to other domains, and packages the callback parameter value and json string into a javascript function through the background of other domains and returns it. Because the request is made through the script tag, the browser The returned string will be parsed and executed according to JavaScript, realizing data transmission between domains.
The support for jsonp in jquery is also based on this solution.
3.Backend proxy method
This method can solve all cross-domain problems, that is, the backend is used as a proxy, and each request for other domains is transferred to the backend of this domain. The backend of this domain accesses other domains by simulating http requests, and then returns the returned results. For the front desk, the advantage of this is that whether it is a document or a js file being accessed, it can be cross-domain.

The above three methods of achieving cross-domain access in js are given to you first. If you study and study carefully, you will definitely gain something