JavaScript iframe cross-domain detailed _javascript tips

1. What caused the Ajax cross-domain problem

Ajax itself actually interacts with the data through the XMLHttpRequest object, and the browser, for security reasons, does not allow the JS code to operate across domains, so it warns.

2. What is the perfect solution?

No. There are many solutions, but only according to their own actual situation to choose.

The specific circumstances are:

I. Mutual access to the domain and subdomain: www.aa.com and book.aa.com
Ii. Mutual access to this domain and other domains: Www.aa.com and www.bb.com with IFRAME
Iii. Mutual access to this domain and other domains: Www.aa.com and www.bb.com XMLHttpRequest Access Proxies
Iv. Mutual access to this domain and other domains: www.aa.com and www.bb.com Create dynamic scripts with JS

Workaround:

If you want to do data interaction, then www.aa.com and book.aa.com must be developed by you. You can add book.aa.com with an IFRAME to a page in www.aa.com, www.aa.com and iframe with document.domain = "aa.com", so that you can unify the domain, you can achieve cross-domain access. In the same domain as in peace Mosaic iframe, directly call the inside of JS can be. (This method I did not try, but theoretically feasible)

Second, when two domains are not at the same time, if you want to call each other, then the same need for two domains are to be developed by you. The use of IFRAME can be used to realize the mutual invocation of data. The solution is to use the hash attribute of the Window.location object. The hash property is the #dshakjdhsjka inside the Http://domian/web/a.htm#dshakjdhsjka. Use JS to change the hash value page will not refresh, you can achieve through JS access to hash value to do communication. But other than IE, most browsers will record history as long as they change the hash, and you need to deal with it in advance and backwards, which is very troublesome. However, the simple processing can still be used, the specific code I have downloaded below. The overall process is that page A and page B are in different fields, B through the IFRAME added to a, a through JS to modify the hash value of the IFRAME, B inside to do a listening (because JS can only modify the hash, the data is changed only by B himself to judge), detected a B hash value was modified, The modified value is processed to return a needed value, and then the hash value of a is modified (note that if a is itself a sort of query page such as http://domian/web/a.aspx?id=3, In B Direct parent.window.location is unable to obtain the data, the same report without permission error, need A to pass this over, so also more trouble, same a inside also want to do listening, if the hash change words to get back the data, then do the corresponding processing.

Third, this situation is most often encountered, but also the most used. It's www.aa.com and www.bb.com. You can only modify one, that is, the other one is someone else, they tell you you want to obtain data to access a certain connection parameters, what is the final return data format. What you need to do is create a new Web page under your domain, let the server get the data from someone else's website, and return it to you. Domain1 under a to the same domain under the getdata.aspx request data, getdata.aspx to domain2 under the responsedata.aspx to send a request, responsedata.aspx return data to Getdata.aspx , the getdata.aspx is returned to a so that a data request is completed. Getdata.aspx acts as an agent in it. Can look at my code specifically.

Four, this and the last difference is that the request is to use the <script> tag to request, this requirement is also two domains are you to develop the line. The principle is JS file injection, in the domain within a to generate a JS tag, its SRC point to the request of another domain of a page b,b return data, you can directly return JS code. Because the SRC attribute of the script can be cross-domain. See the code specifically, this is also relatively simple.

Get the elements in the IFRAME in the parent window

Format: window.frames["The name value of the IFRAME"].document.getelementbyid ("ID of the control in the IFrame"). Click (); 
Example: window.frames["IFM"].document.getelementbyid ("Btnok"). Click (); 

Format:

var Obj=document.getelementbyid ("Name of the IFrame"). Contentwindow; 
var Ifmobj=obj.document.getelementbyid ("ID of the control in the IFrame"); 
Ifmobj.click (); 
Instance: 
var Obj=document.getelementbyid ("IFM"). Contentwindow; 
var Ifmobj=obj.document.getelementbyid ("Btnok"); 
Ifmobj.click (); 

Gets the element of the parent window in the IFRAME

Format: Window.parent.document.getElementById (the element ID of the parent window). Click (); 
Example: Window.parent.document.getElementById ("Btnok"). Click (); 
 

Jquery

Get the elements in the IFRAME in the parent window

Format: $ ("#iframe的ID"). Contents (). Find ("#iframe中的控件ID"). Click ();//jquery Method 1 
instance: $ ("#ifm"). Contents (). Find ("# Btnok "). Click ();//jquery Method 1 

Format: $ ("#iframe中的控件ID", Document.frames ("Name of Frame"). Document). Click ();//jquery Method 2 
Example: $ ("#btnOk", Document.frames ("IFM"). Document). Click ();//jquery Method 2 

Gets the element of the parent window in the IFRAME

Format: $ (' #父窗口中的元素ID ', parent.document). Click (); 
Example: $ (' #btnOk ', parent.document). Click (); 

Thank you for reading, I hope to help you, thank you for your support for this site!