Résumé de diverses méthodes pour la hauteur adaptative de l'échange iframe

Résumé de diverses méthodes pour la hauteur adaptative de l'échange iframe_Experience

WBOY

Libérer： 2016-05-16 12:04:39

original

2260 Les gens l'ont consulté

Étant donné que l'iframe sans bordures peut être intégré de manière transparente à la page Web, il est possible de mettre à jour certaines données de la page sans actualiser la page. Cependant, la taille de l'iframe n'est pas aussi « évolutive » que la couche, ce qui pose des problèmes. en cours d'utilisation. Problème, trop n'est pas bon lors du réglage de la hauteur d'une iframe, et moins c'est encore pire. Maintenant, laissez-moi vous expliquer un moyen d'ajuster dynamiquement la hauteur d'une iframe, principalement les fonctions JS suivantes :
. Tout d'abord cette méthode : le code est simple et la compatibilité est correcte. Vous pouvez d'abord le tester.

Copier le code Le code est le suivant :

 
fonction SetWinHeight(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; 
} 
} 
} 

Enfin, lors de l'ajout d'iframe, vous ne pouvez pas perdre l'attribut onload. Bien sûr, l'identifiant doit également correspondre à win dans le. function

Copier le code Le code est le suivant :

 
&lt ;/iframe> <br>
</div> <br>Ce type de code est similaire à la solution ci-dessus <br><strong>Le code classique iFrame hauteur adaptative, a réussi le test dans IE6/IE7/IE8/Firefox/Opera/ Chrome/Safari. </strong> <br>Code HTML : <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="29880" class="copybut" id="copybut29880" onclick="doCopy('code29880')"><u>Copier le code </u></a></span> Le code est le suivant : </div>
<div class="codebody" id="code29880"> <br> <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" >< /iframe> Code Javascript : <br><script type="text/javascript" language="javascript"> <br>function iFrameHeight() { <br>var ifm= document.getElementById("iframepage"); 🎜>var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; <br>if(ifm != null && subWeb != null) { <br>ifm.height = subWeb.body .scrollHeight; <br>} <br>} <br></script> <br><br>
</div>
<br><br>Le suivant est plus compatible <strong></strong><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="69401" class="copybut" id="copybut69401" onclick="doCopy('code69401')">Copier le code<u></u></a> Le code est le suivant :</span>
</div> <div class="codebody" id="code69401"><script language="javascript" type="text/javascript"&gt ; <br>function dyniframesize(down) { <br>var pTar = null; <br>if (document.getElementById){ <br>pTar = document.getElementById(down); 🎜>eval(' ​​pTar = ' + down + ';'); <br>} <br>if (pTar && !window.opera){ <br>//commencer le redimensionnement de l'iframe <br>pTar.style.display= "bloquer" <br>if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ <br>//ns6 syntaxe <br>pTar.height = pTar.contentDocument.body.offsetHeight <br>pTar. width = pTar.contentDocument .body.scrollWidth+20; <br>} <br>else if (pTar.Document && pTar.Document.body.scrollHeight){ <br>//ie5+ syntaxe <br>pTar.height = pTar .Document.body. scrollHeight; <br>pTar.width = pTar.Document.body.scrollWidth; <br>} <br>} <br></script> "/default2.aspx " frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm ');" width ="100%"> <br> 




solution iframe pour une autre situation (super simple) 
 
 Conseils importants : L'adresse Web que vous devez renseigner dans src= doit être sur le même site que cette page, sinon une erreur se produira et dira "Accès refusé !" » (En fait, c'est à cause du problème inter-domaines de Js qui conduit à un refus d'accès) 

J'ai déjà rencontré ce problème afin d'obtenir la réponse, j'ai cherché en ligne et j'ai découvert que de nombreuses personnes avaient également rencontré un tel problème. un problème. Maintenant, je partage la solution
1. Créez un fichier bottom.js, puis entrez le code suivant (seulement deux lignes)

Copiez le code

Le code est le suivant : parent.document.all("Frame ID name").style.height=document.body.scrollHeight parent .document.all(" Nom de l'ID du cadre").style.width=document.body.scrollWidth
Nama ID bingkai di sini ialah ID Iframe, contohnya:

Salin kod Kod adalah seperti berikut:

2. Tambahkan

pada setiap fail yang disertakan dalam tapak web anda adalah seperti berikut:

 
3 ia sehari! 
 Lulus ujian di bawah WINXP dan IE6. Ia sangat mudah! 

Laksanakan ketinggian penyesuaian iframe
Laksanakan ketinggian penyesuaian iframe, yang boleh menyesuaikan secara automatik dengan panjang halaman untuk mengelakkan fenomena bar skrol muncul pada halaman dan iframe pada masa yang sama.

Salin kod Kod adalah seperti berikut:

Kaedah ketiga ialah penyesuaian iframe kelompok:

Bila-bila masa anda menemui iframe di tempat kerja Mengenai masalah ketinggian penyesuaian kandungan, saya telah melihat penyelesaian untuk masalah yang sama di Internet sebelum ini, jadi saya mencari dan menemui penyelesaian yang agak lengkap yang serasi dengan pelayar, jadi saya tidak perlu menulisnya sendiri.
Walaupun anda tidak perlu menulisnya sendiri, idea itu masih perlu difahami pada asasnya, ia adalah untuk mendapatkan ketinggian kandungan dalam dokumen yang ditentukan oleh atribut iframe src, dan kemudian menggunakannya untuk menetapkan. ketinggian iframe itu sendiri Apabila halaman tempat iframe berada dimuatkan, ketinggian halaman diubah Semua iframe yang memerlukan ketinggian penyesuaian ditetapkan secara automatik, menjimatkan masa dan usaha Jika ditentukan bahawa semua iframe dalam halaman memerlukan ketinggian penyesuaian, dapatkan secara langsung tatasusunan iframe dan berikannya kepada kod Anda tidak perlu menulis ID sendiri, dan program telah selesai. (Kod itu ditampal:)

Salin kod

Kod adalah seperti berikut:

 
Seseorang di Internet telah menambah baik kaedah dan menyelesaikan masalah melaraskan ketinggian iframe secara automatik kandungan dokumen yang terkandung dalam iframe berubah secara dinamik Prinsipnya adalah untuk terus mengimbas ketinggian kandungan dokumen yang terkandung dalam iframe pada halaman tempat iframe berada dan menukar ketinggian iframe itu sendiri masalah, tetapi sukar untuk mengatakan sama ada ia akan memberi kesan kepada kelajuan halaman dan penggunaan sumber sistem. Saya rasa kaedah itu agak paranoid. 

Kaedah keempat, hanya memanggil ID iframe yang diketahui tidak disyorkan

Salin kod

Kodnya adalah seperti berikut:

function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document. body.scrollHeight :iframeObj.contentDocument.body.offsetHeight);},200) }Bagaimana hendak menggunakannya? js.