JS cross-origin issue ..

Source: Internet
Author: User
Tags subdomain
It was fun to get a TX Microblog on your blog, but suddenly it was found that the width of the name and address was a little big in Google, and it was distorted .. I don't want to use CSS or CSS to cover anything. I can't use js to change the width .. The result is tragic, and this cross-origin JS problem is discovered.
 
Find information .. Not resolved ..
 
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />
< Title > </ Title >

< Script SRC = "Scripts/jquery-1.4.1.js" Type = "Text/JavaScript" > </ Script >
< Script SRC = "Scripts/jquery-1.4.1.min.js" Type = "Text/JavaScript" > </ Script >
</ Head >

< Body >

< Table ID = "Calendar#entrycal" > < Tr > < TD > 234234234 </ TD > </ Tr > </ Table >
< IFRAME Name = "Fname" ID = "Fname" Frameborder = "0" Scrolling = "No" SRC = "Http://show.v.t.qq.com/index.php? C = show & A = index & n = m184394282 & W = 0 & H = 508 & FL = 1 & l = 30 & O = 1 & Co = 4 & cs = 20172_202_9c85_bc6" Width = "100%" Height = "400" > </ IFRAME >
< Div ID = "WB" > </ Div >
</ Body >

</ Html >
< Script Type = "Text/JavaScript" >
Window. onload = Function (){
// VaR test = $ ("# calendar#entrycal ");
// Test. Hide ();
// Test. Before (). append
// $ ("# Userinfo + P"). removeattr ("style ");
// $ (Window. Frames ["fname" 2.16.doc ument). Find (". userinfo: eq (0)> P"). removeattr ("style ");



Alert ($ (document. getelementbyid ( ' Fname ' Registr.content?#document.body=.html (); // No access permission
 
Alert ($ (window. Frames [ " Fname " .Document).html ());
Alert ($ (window. Frames [ " Fname " 2.16.doc ument). Find ($ ( " . Userinfo: eq (0)> P " )));
Alert ($ (window. Frames [ " Fname " 2.16.doc ument). Find ($ ( " . Userinfo: eq (0)> P " ). ATTR ( " Style " ));
}
</ Script >

 

Solution 1: clipboard

Principle:The features of IE attached to the Windows platform provide us with an IFRAME-based method that uses memory for "Bypass". Here I call it the local storage principle.

Disadvantages:Non-ie browsers are not supported, and the operation on the clipboard is affected. The user experience is very poor, especially in IE7. A prompt box is displayed when the security level is affected.

Demo:[Click here to view details]

Subpage in subdomain:Demo.ioldfish.cnAdd the following to the page:CodeObtain the page height and save it to the clipboard.

  1. <Script Type="Text/JavaScript">
  2. VaR UA=Navigator.Useragent;
  3. If ((I=UA.Indexof("MSIE"))> =0)
  4. {
  5. VaR Iobloud=Window.Document.Documentelement.Scrollheight;
  6. Window.ClipboardData.Setdata('Text',String(Iobloud));
  7. }
  8. </SCRIPT>

The home page is in the primary domain:Www.ioldfish.cnAdd the following code to the page to obtain the clipboard value and assign the value to the IFRAME height of the Child page.

  1. <Script Type="Text/JavaScript">
  2. Window.Onload=Function()
  3. {
  4. VaR Iobj=Document.Getelementbyid('IID');
  5. Iobj.Style.Height=Parseint(Window.ClipboardData.Getdata('Text'))+'Px';
  6. }
  7. </SCRIPT>

 

Solution 2: Document. Domain

Principle:Set document. domain to spoof the browser

Disadvantages:Communication between different primary domains cannot be achieved. When another IFRAME is included in a page, a security exception occurs and access is denied.

Demo:[Click here to view details]

The home page is in the primary domain:Www.ioldfish.cnThe subpage is in the subdomain:Demo.ioldfish.cnAdd the following code to the headers of the two pages:

    1. <Script Type="Text/JavaScript">
    2. Document.Domain="Ioldfish.cn";
    3. </SCRIPT>
Solution 3: Get hash values through Js for communication

Principle:Hash can implement cross-Origin data transfer for cross-origin communication.

Disadvantages:The process of dynamically generating URL parameters in the parent window is more complex. In addition, changes to hash in browsers other than IE will record the history, which will affect the forward and backward functions of the browser and lead to poor experience.

Demo:[Click here to view details]

The subpage is in the primary domain:Www.lzdaily.comNext, add the following code to the page. Because hash is not subject to cross-origin restrictions, You can smoothly transfer the height of this page to the hash on the home page.

    1. script type = " text/JavaScript "
    2. var hashh = document . documentelement . scrollheight ;
    3. var Urla = " http://www.ioldfish.cn/wp-content/demo/domain/hash/a2.html " ;
    4. parent . location . href = Urla + " # " + hashh ;
    5. / SCRIPT>

The home page is in the primary domain:Www.ioldfish.cnNext, add the following code to the page. First, obtain the hash value passed from the sub-page, and then assign the hash value to the height of the IFRAME in which the sub-page is located.

  1. <Script Type="Text/JavaScript">
  2. Window.Onload=Function()
  3. {
  4. VaR Iobj=Document.Getelementbyid('IID');
  5. If(Location.Hash)
  6. {
  7. Iobj.Style.Height=Location.Hash.Split("#")[1]+"Px";
  8. }
  9. }
  10. </SCRIPT>
Solution 4: Improved communication by passing hash values

Principle:This solution uses the "front-end proxy" method to implement hash value transfer and greatly improves the experience compared with solution 3.

Disadvantages:The process of dynamically generating URL parameters in the parent window is more complex.

Demo:[Click here to view details]

The subpage is in the primary domain:Www.lzdaily.comNext, add the following code to the page. First, add an IFRAME [which can be dynamically generated] In the same domain as the Home Page. Its function is like a stepping stone. The C page does not require any code. You only need to ensure that there is a page to prevent the 404 error! This method can also pass values across domains by modifying the name value of IFRAME, but it only compares "trivial.

    1. <IFRAME ID="Iframec" Name="Iframec" SRC="Http://www.ioldfish.cn/wp-content/demo/domain/hashbetter/c.html" Frameborder="0" Height="0"> </IFRAME>

Add the following code to the page, use the URL of Page C to receive the hash value, and pass the hash value to the home page of the same domain.

    1. script type = " text/JavaScript "
    2. hashh = document . documentelement . scrollheight ;
    3. urlc = " http://www.ioldfish.cn/wp-content/demo/domain/hashbetter/c.html " ;
    4. document . getelementbyid ( " iframec " ) . SRC = urlc + " # " + hashh ;
    5. / SCRIPT>

The home page is in the primary domain:Www.ioldfish.cnAdd the following code to the page to obtain the hash value passed in from Page C. Here, we apply a technique that is used directly from page.Frames ["IID"]. Frames ["iframec"]. Location. Hash, You can directly access and obtain the hash value of the C page. In this way, passing hash values through the proxy page greatly improves the user experience compared to solution 3.

  1. <Script Type="Text/JavaScript">
  2. Window.Onload=Function()
  3. {
  4. VaR Iobj=Document.Getelementbyid('IID');
  5. Iobloud=Frames["IID"].Frames["Iframec"].Location.Hash;
  6. Iobj.Style.Height=Iobloud.Split("#")[1]+"Px";
  7. }
  8. </SCRIPT>

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.