Adaptive height of iframe in cross-domain

Recently in a demand, the need for a general background: an IFRAME in the page is embedded in another company's list page

The blogger's first reaction was "very easy! "So, roll up the double sleeves and start knocking the code

The result is a problem, IFRAME cross-domain, unable to get the height of the embedded page, so the appearance of the upper and lower scroll bar, so ugly!

So the internet to find the big God, Emperor not bear Ah, finally found, excited not to say the table ....

Story background, complete.

/****************************** gorgeous split line, haha ****************************/

The great God's example is roughly like this:

Suppose a page under www.a.com a.html to include a page c.html under Www.b.com.

We use another page agent.html under Www.a.com to do the proxy, get the height of the iframe page, and set the height of the IFRAME element.

The a.html contains an iframe:

1 <  src= "http://www.b.com/c.html"  ID= "Iframe"  frameborder= "0"  scrolling= "No"  style= "border:0px;" ></ iframe >

Add the following code to the c.html:

1 <iframeID= "C_iframe"Height= "0"width= "0"src= "http://www.a.com/agent.html"style= "Display:none" ></iframe>2 <Scripttype= "Text/javascript">3 (functionautoheight () {4 varB_width=Math.max (document.body.scrollwidth,document.body.clientwidth);5 varB_height=Math.max (document.body.scrollheight,document.body.clientheight);6 varC_iframe=document.getElementById ("C_iframe");7 c_iframe.src=c_iframe.src+ "#" +B_width+ "|" +B_height; //here, the b.htm is passed through a hash.8 })();9 </Script>

Finally, agent.html into a section JS:

1 <Scripttype= "Text/javascript">2 varB_iframe=Window.parent.parent.document.getElementById ("Iframe");3 varHash_url=Window.location.hash;4 if(Hash_url.indexof ("#")>=0){5 varHash_width=Hash_url.split ("#")[1].split ("|")[0]+"px";6 varHash_height=Hash_url.split ("#")[1].split ("|")[1]+"px";7 B_iframe.style.width=Hash_width;8 B_iframe.style.height=Hash_height;9 }Ten </Script>

Agent.html the width and height values from the URL and sets the height and width of the IFRAME (because agent.html is under www.a.com, so the operation A.html is not limited by the same origin of JavaScript)

Original link: IFrame highly adaptive content (http://caibaojian.com/iframe-adjust-content-height.html)

Article citation: Front-end Development blog

Adaptive height of iframe in cross-domain