Maison >interface Web >js tutoriel >Utilisez jQuery pour résoudre le problème de la hauteur adaptative iframe sans juger le navigateur height_jquery

Utilisez jQuery pour résoudre le problème de la hauteur adaptative iframe sans juger le navigateur height_jquery

WBOY
WBOYoriginal
2016-05-16 16:26:251246parcourir

Voici deux méthodes super simples. Vous n’avez rien à écrire pour déterminer la hauteur et la largeur du navigateur.

Choisissez simplement l’une des deux méthodes ci-dessous. L'un est placé sur la même page que l'iframe et l'autre est placé sur la page test.html.

Faites attention à ne pas le mettre au mauvais endroit.
Dans le code iframe, veillez à écrire l'ID. S'il n'y a pas d'ID, il est introuvable

.

Copier le code Le code est le suivant :


Méthode 1 :

Copier le code Le code est le suivant :

//Remarque : Le code suivant est placé sur la même page que l'iframe et appelé
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height() 30;
$(this).height(mainheight);
});

Méthode 2 :

Copier le code Le code est le suivant :

//Remarque : Le code suivant est placé dans test.html pour appeler
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height() 30;
main.height(thisheight);
});

Dans le processus de travail sur le projet, vous devez utiliser iframe, mais iframe a une hauteur par défaut. Le contenu qui dépasse la hauteur par défaut sera masqué et le contenu qui est plus petit que la hauteur par défaut utilisera la hauteur par défaut. comme la hauteur du contenu. Dans le processus de recherche de réponses, j'ai découvert comment contrôler l'adaptation de la hauteur de l'iframe

.

La hauteur adaptative iframe elle-même est une méthode très simple, qui consiste à recalculer la hauteur après le chargement de la page.

Le code est le suivant :

Copier le code Le code est le suivant :

//Méthode publique : définissez la hauteur de l'iframe pour garantir que toutes les données sont affichées
//fonction SetPageHeight() {
// var iframe = getUrlParam('ifname');
// var myiframe = window.parent.document.getElementById(iframe);
// iframeLoaded(myiframe);
//}
var iframeLoaded = fonction (iframe) {
Si (iframe.src.length > 0) {
Si (!iframe.readyState || iframe.readyState == "complete") {
            var bHauteur =
              iframe.contentWindow.document.body.scrollHeight;
            var dHauteur =
iframe.contentWindow.document.documentElement.scrollHeight;
          var hauteur = Math.max(bHauteur, dHauteur);
iframe.height = hauteur;
>
>
>
//Réinitialiser la hauteur de l'iframe lors de la pagination ; après modification : iframe.name = iframe.id
var reSetIframeHeight = fonction()
{
Essayez {
      var oIframe = parent.document.getElementById(window.name);
        oIframe.height = 100;
iframeLoaded(oIframe);
>
​​attraper (erreur)
{
         essayez {
             parent.document.getElementById(window.name).height = 1000;
               } catch (err2) { }
>
>

Appelez la méthode reSetIframeHeight();

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn