Home >Web Front-end >JS Tutorial >JavaScript processing Iframe adaptive height (under the same or different domain names)_javascript skills

JavaScript processing Iframe adaptive height (under the same or different domain names)_javascript skills

WBOYOriginal: 2016-05-16 17:38:581481browse

1. Processing of Iframe adaptive height under the same domain name

Copy the code The code is as follows:

 
 <br>
</div> <br>Of course I am using Asp.Net MVC here and src is set to the routing structure <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="35723" class="copybut" id="copybut35723" onclick="doCopy('code35723')"><u>Copy code </u></a></span> The code is as follows: </div>
<div class="codebody" id="code35723"> <br><script type="text/javascript"> <br>function SetIFrameHeight(obj) { <br>var win = obj; <br>if (document.getElementById) { <br>if (win && !window.opera) { <br>if (win.contentDocument && win.contentDocument.body.offsetHeight) <br>win.height = win.contentDocument .body.offsetHeight; <br>else if (win.Document && win.Document.body.scrollHeight) <br>win.height = win.Document.body.scrollHeight; <br>} <br>} <br>} <br></script> <br>
</div> <br>What is used is that when the iframe nested page is loaded, use the onload event to get the height of the web page nested in the iframe, and then assign it to the Iframe. Just the height. <br><strong>2. Iframe is highly adaptive when crossing domains </strong> <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="13696" class="copybut" id="copybut13696" onclick="doCopy('code13696')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code13696"> <br>When the main page and the nested iframe have different domain names, it is a little more troublesome and you need to avoid JavaScript's cross-domain restrictions. <br>Principle: There are three existing iframe main pages main.html, iframe nested pages iframe.html, and iframe intermediary page agent.html, which are embedded through main.html (domain name is http://www.ccvita.com) Set iframe.html (domain name: http://www.phpq.net), when the user browses, execute the JavaScript code in iframe.html to set the height of the iframe page added to the scr address of iframeC, agent.html (domain name: http://www.ccvita.com) obtains the passed height and sets the height of the iframe in main.html through JavaScript. Finally achieve the desired goal. <br><br>iframe main page main.html <br>[code] <br>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head>&lt ;title>iframe main page</title></head> <br><body> <br><div style="border:1px solid #ccc;padding:10px;"> <br>&lt ;iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"> 
 

Tail

iframe nested page iframe.html

Copy code The code is as follows:

 
Iframed page 
 
Text< ;br />

Text

< ;br />

Text

Text

< ;script type="text/javascript"> 
function sethash(){ 
hashH = document.documentElement.scrollHeight; 
urlC = "agent.html"; 
document.getElementByIdx("iframeC ").src=urlC "#" hashH; 
} 
window.onload=sethash;

iframe intermediary page agent.html

Copy code The code is as follows:

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

iframe intermediary page