1. Traitement de la hauteur adaptative Iframe sous le même nom de domaine
1 | <iframe onload= "Javascript:SetIFrameHeight(this)" src= "../Home/b" id= "win" name= "win" width= "100%" height= "1" > </iframe>
|
Copier après la connexion
Bien sûr, j'utilise Asp.Net MVC ici et src est défini sur la structure de routage
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type= "text/javascript" >
function SetIFrameHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</script>
|
Copier après la connexion
Ce qui est utilisé, c'est que lorsque la page imbriquée iframe est chargée, utilisez l'événement onload pour obtenir la hauteur de la page Web imbriquée dans l'iframe, puis attribuez-la à la hauteur de l'iframe.
2. Iframe est hautement adaptatif lors du croisement de domaines
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。
原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http:
iframe主页面main.html
[code]
< !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><title>iframe主页面</title></head>
<body>
<div style= "border:1px solid #ccc;padding:10px;" >
<iframe id= "frame_content" name= "frame_content" src= "iframe.html" width= "100%" height= "0" scrolling= "no" frameborder= "0" ></iframe>
</div>
<br />尾部<br />
</body>
</html>
|
Copier après la connexion
page imbriquée iframe iframe.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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><title>被iframe嵌套页面</title></head>
<body>
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<iframe id= "iframeC" name= "iframeC" src= "" width= "0" height= "0" style= "display:none;" ></iframe>
<script type= "text/javascript" >
function sethash(){
hashH = document.documentElement.scrollHeight;
urlC = "agent.html" ;
document.getElementByIdx( "iframeC" ).src=urlC+ "#" +hashH;
}
window.onload=sethash;
</script>
</body>
</html>
|
Copier après la connexion
page intermédiaire iframe agent.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < !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><title>iframe中介页面</title></head>
<body>
<script>
function pseth() {
var iObj = parent.parent.document.getElementByIdx('frame_content');
iObjH = parent.parent.frames[ "frame_content" ].frames[ "iframeC" ].location.hash;
iObj.style.height = iObjH.split( "#" )[1]+ "px" ;
}
pseth();
</script>
</body>
</html>
|
Copier après la connexion
Dans le code, kimi peut avoir une représentation de chemin incomplète
main.html et agent.html doivent être dans le même domaine
tandis que iframe.html est dans un autre domaine
Pour plus d'articles liés au traitement JavaScript de la hauteur adaptative Iframe (sous des noms de domaine identiques ou différents), veuillez faire attention au site Web PHP chinois !