Detailed explanation of javascript iframe cross-domain

1. What causes the problem that ajax cannot cross domain?

ajax itself actually interacts with data through the XMLHttpRequest object. However, for security reasons, the browser does not allow js code to perform cross-domain operations, so a warning will be issued.

2. Is there any perfect solution?

No. There are many solutions, but you can only choose based on your actual situation.

The specific situations are:

1. Mutual access between this domain and sub-domains: www.aa.com and book.aa.com
2. Mutual access between this domain and other domains: www.aa.com and www. bb.com uses iframe
3. Mutual access between this domain and other domains: www.aa.com and www.bb.com Use XMLHttpRequest to access the proxy
4. Mutual access between this domain and other domains: www.aa.com and www.bb.com Use JS to create dynamic scripts

Solution:

1. If you want to achieve data interaction, then www.aa.com and book.aa.com must be developed by you. You can add book.aa.com to a page of www.aa.com using an iframe, and add document.domain = "aa.com" to both www.aa.com and the iframe, so that the domains can be unified. , cross-domain access can be achieved. Just like embedding an iframe in the same domain, just call the JS inside it directly. (I have not tried this method, but it is theoretically feasible)

2. When the two domains are different, if you want to call each other, then both domains also need to be developed by you. Using iframe, data can be transferred to each other. The solution is to use the hash property of the window.location object. The hash attribute is #dshakjdhsjka in http://domian/web/a.htm#dshakjdhsjka. If you use JS to change the hash value, the web page will not be refreshed. You can access the hash value through JS to achieve communication. However, except for IE, most other browsers will record the history as long as the hash is changed, and you need to process it when going forward and backward, which is very troublesome. However, it can still be used for simple processing. I will download the specific code below. The general process is that page a and page b are in different domains, b is added to a through iframe, a modifies the hash value of iframe through JS, and a monitor is made in b (because JS can only modify the hash, whether the data is changed can only be changed by b will judge by himself), detect that the hash value of b has been modified, get the modified value, return the value required by a after processing, and then modify the hash value of a (you should pay attention to this, if a itself is the kind of query page) For example, http://domian/web/a.aspx?id=3, it is impossible to obtain data directly in parent.window.location in b. It also reports an error of no permission. A needs to pass this over, so it is more troublesome. ), also need to be monitored in a. If the hash changes, the returned data will be obtained, and then processed accordingly.

3. This situation is the most frequently encountered and the most used. You can only modify one of www.aa.com and www.bb.com, which means the other one belongs to someone else. People tell you what the connection parameters look like when you want to get data, and what format the final returned data is. of. What you need to do is to create a new web page under your domain, let the server get the data from other people's websites, and then return it to you. a under domain1 requests data from GetData.aspx under the same domain, GetData.aspx sends a request to ResponseData.aspx under domain2, ResponseData.aspx returns the data to GetData.aspx, and GetData.aspx returns it to a. This is done. A data request. GetData.aspx acts as a proxy. You can see my code for details.

4. The difference between this one and the previous one is that the request is made using the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. This requirement also requires that both domains are developed by you. The principle is JS file injection. A JS tag is generated in a in this domain, and its SRC points to a page b in another requested domain. b can return data, and the JS code can be directly returned. Because the src attribute of script can be cross-domain. Looking at the code specifically, this one is relatively simple.

Get the elements in the iframe in the parent window

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例：window.frames["ifm"].document.getElementById("btnOk").click();

Format:

var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例：
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();

Get the elements of the parent window in the iframe

格式：window.parent.document.getElementById("父窗口的元素ID").click();
实例：window.parent.document.getElementById("btnOk").click();

jquery

get in parent window Elements in iframe

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

Get elements of parent window in iframe

格式：$('#父窗口中的元素ID', parent.document).click();
实例：$('#btnOk', parent.document).click();