IFRAME cross-domain processing method-javascript

Source: Internet
Author: User

In the long front-end development journey, inevitably will be exposed to Ajax, and generally is used in the same domain AJAX requests, but if the request is in a different domain, the request cannot be executed, and will throw an exception prompt does not allow cross-domain requests, currently I do not find clear information on why this is, I think it should be for safety reasons. Even so, there are ways to achieve cross-domain access, and there is more than one solution: how to use an IFRAME to complete an AJAX cross-domain request.


As shown: page request.html of the domain a.com (that is, http://a.com/ request.html) inside nested an IFRAME to point to the domain B.Com response.html, and response.html nested the a.com of the domain proxy.html.

To implement the process.php of the domain a.com request.html request domain B.Com, you can pass the requested parameters through the URL to response.html, and the response.html sends a true AJAX request to process.php (response.ht Both ML and process.php belong to the domain B.Com, and then the returned results are passed to the proxy.html via a URL, and finally because Proxy.html and request.html are under the same domain, proxy.html can be used to return the results to window.top in req uest.html Complete cross-domain communication.
The whole process of thinking is actually very clear, The real Ajax request does not occur in the domain a.com, but in the domain B.Com, and the domain a.com is done two things, the first thing is done by request.html, send the incoming parameters to the domain B.Com, the second thing proxy.html complete, the domain b.com response data is handed back to Reque St.html.

Cross-domain Access flowchart
OK, the next step is to implement the code, and before that, look at the document structure:
http://a.com/
Request.html
Proxy.html
http://b.com/
Response.html
process.php
1, first to see request.html, in order to facilitate understanding, I put JS also put on the page:
Copy the code code as follows:

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> the path to this page is:http://a.com/request.html</title>
<body>
<p id= "Result" > here will fill in the results of the response </p>
<a id= "sendbtn" href= "javascript:void (0)" > Click to send cross-domain requests </a>
<iframe id= "Serverif" ></iframe>
<script type= "Text/javascript" >
document.getElementById ("Sendbtn"). onclick = function () {
var url = "Http://b.com/response.html";
var fn = "Getperson";//This is the method defined in response.html
var reqdata = ' {' id ': 24} ';//This is the requested parameter
var callback = "callback";//This is a callback function that executes after the entire request is completed, performing the last action
Crossrequest (URL, FN, reqdata, callback);//Send Request
}
function crossrequest (URL, FN, Reqdata, callback) {
var server = document.getElementById ("Serverif");
SERVER.SRC = URL + "? fn=" + encodeURIComponent (FN) + "&data=" + encodeuricomponent (reqdata) + "&callback=" + encod Euricomponent (callback);//The request sent here by request.html to Response.html is actually passed the parameter and callback method to response.html through the SRC.
}
function CallBack (data) {///callback functions
var str = "My name is" + Data.name + ". I am a "+ Data.sex +". I am "+ data.age +" years old. ";
document.getElementById ("Result"). InnerHTML = str;
}
</script>
</body>

<! DOCTYPE html> 

Looking at the code and comments is easy to understand, this page is actually to tell response.html: I want you to execute your defined method Getperson, and use the parameter I gave you ' {' id ': 24} '. Perhaps the ambiguity is why the callback function is passed to response.html, which is defined on this page of the method, response.html can not execute it; see the next code will know: Response.html is purely responsible for the callback this method name passed to the next A man proxy.html, and proxy.html got callback this method name can be executed, because proxy.html and request.html are the same domain.
2, next we look at the response.html code:
Copy the code code as follows:

<! DOCTYPE html> 

This is actually to receive requests from the request.html request parameters and methods to send a real AJAX request to the server process.php, and then the data returned from the server and the name of the callback function passed from request.html to proxy.html.
3, the next look at process.php code, relatively simple:

<?php    $data = Json_decode (file_get_contents ("Php://input"));    Header ("Content-type:application/json; Charset=utf-8 ");    Echo (' {' id ': '. $data->id. ', ' age ': $, ' sex ': ' Boy ', ' name ': ' huangxueming '} ';    ? >  

<?php    $data = Json_decode (file_get_contents ("Php://input"));    Header ("Content-type:application/json; Charset=utf-8 ");    Echo (' {' id ': '. $data->id. ', ' age ': $, ' sex ': ' Boy ', ' name ': ' huangxueming '} ';    ? >   

These few lines of code is not intended to speak, a little bit of PHP basic can be read, no PHP base should be able to see a probably, hehe ~ ~ ~
4, the last is proxy.html:

<! DOCTYPE html> 

This is the final step, Proxy finally got the request.html through the response.html passed the callback function name and the response data transmitted from the response.html directly, using Window.top to execute the callback function defined in request.html.
In practical applications, Proxy.html basically can be a generic agent, no changes, if you need to use a lot of cross-domain methods, these methods can be added in the domain a.com, and the domain B.Com is equivalent to define some interfaces for a.com calls, such as Getperson, of course, this is not a real interface, but easy to understand, for example And, of course, to hide the iframe. OK, and finally the old saying: the technology is not the most important, the most important thing is the ability to learn.

IFRAME cross-domain processing method-javascript

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.