Home > Others

Cross-origin IFRAME highly adaptive

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Original article: highly adaptive cross-domain IFRAME

 

  • Cross-subdomain IFRAME highly adaptive
  • Fully cross-origin IFRAME highly adaptive

 

We can easily achieve the same domain

1. The parent page accesses the document object through the contentdocument or document attribute of IFRAME, so that the height of the page can be obtained. The height value is assigned to the IFRAME tag.

2. The child page can access the IFRAME tag introduced in the parent page through parent, and then set its height.

 

However, cross-domain access is not allowed to access the documents on the child or parent pages (undefined is returned). So what we need to do is to break through or indirectly break through this barrier.

 

I. Cross-subdomain IFRAME highly adaptive

For example, 'a .jd.com/3.html' is embedded with 'B .jd.com/4.html'.

3. html

<!DOCTYPE html>

4. html


<! Doctype HTML> 

We can see the comparison with the previous article. You only need to add document. domain to both pages.


 
Ii. Fully cross-origin IFRAME highly adaptive

The following resources are available:


  
    
 
   
  • Page A: http://snandy.github.io/lib/iframe/A.html
    • 
 
   
  • Page B: http://snandy.github.io/lib/iframe/ B .html
    • 
 
   
  • Page C: http://snandy.jd-app.com
    • 
 
   
  • D. JS: http://snandy.github.io/lib/iframe/D.js
    • 

  


These four resources have the following relationships:


1. Embedding C in A, A and C in different domains, that is, cross-domain IFRAME


2. Embedding B, C, and B in C is in different domains, but A and B are in the same domain.


3. Embed D. js in C and D. js in projects in the same domain as


 


A hidden B .html is used to achieve highly adaptive.


A.html


Embedded Page C: http://snandy.jd-app.com


<!DOCTYPE html>

 


B .html


Embedded in the C page, the object is hidden, and the iframe(c.html) height of A is changed through parent.parent.pdf to A, which is the most critical, because A and B are in the same domain, so they can access a's document objects.


<!DOCTYPE html>

 


C.html


Embedded in a and different from a, c must be adaptive. If C is high, the iframe in a is set to high. Ciliembedded B .html and D. js


<! Doctype HTML> 

　　


D. js


Calculate the height after page C is loaded. Then, the calculated heightvalue is assigned to the SRC of iframe( B .html)


// Calculate the actual height of the page. IFRAME adaptive function calcpageheight (DOC) {var cheight = math. max (Doc. body. clientheight, doc.doc umentelement. clientheight) var sheight = math. max (Doc. body. scrollheight, doc.doc umentelement. scrollheight) var Height = math. max (cheight, sheight) return height} window. onload = function () {var Doc = Document var Height = calcpageheight (DOC) var myifr = Doc. getelementbyid ('myifr') if (myifr) {Myifr. src = 'HTTP: // snandy. GitHub. IO/lib/iframe/B .html? Height = '+ height // lele.log(doc.doc umentelement. scrollheight )}};


　　


Online example: http://snandy.github.io/lib/iframe/A.html


 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More