OneSpan Sign Developer: Responsive iFrame dans la page HTML

iFrames sont un outil polyvalent lors du développement avec OneSpan Sign. Par exemple, vous pouvez intégrer Designer View dans un iFrame, qui fournit un moyen facile d'intégrer l'expérience de placement de signature et d'examen de documents dans votre propre page Web. Alternativement, vous pouvez intégrer une cérémonie de signature dans un iFrame pour créer une expérience plus flexible pour votre client sur n'importe quel appareil et mieux contrôler votre flux de travail.

Parfois, cependant, la fenêtre iFrame est trop étroite. Cela oblige l'utilisateur à faire défiler horizontalement pour lire un document, ce qui n'est pas l'expérience utilisateur idéale que nous voulons créer.

Dans ce blog, nous allons démontrer comment faire un iFrame réactif. Nous avons deux objectifs dans cette démo: premièrement, nous voulons que notre fenêtre iFrame soit un taux relativement fixe de toute la page de fenêtre (73% de largeur et 77px fixe du haut, coller au coin gauche-bas), puis deuxièmement nous voulons éviter ce problème de défilement horizontal. 

Tout d'abord, nous avons besoin d'un iFrame dans un div dont le style CSS pourrait répondre à notre exigence ci-dessus: 73% largeur de l'écran, fixe 77px du haut et coller à l'angle inférieur gauche.

Dans Javascript, après avoir complètement chargé la page ou chaque fois que le navigateur est redimensionné, nous avons besoin d'ajouter un auditeur pour l'événement:

        $(fonction)MD
             changeIframeSize();
         })
         window.onresize 'fonction(événement)
             changeIframeSize();
          };

La largeur du seuil lorsque la barre de défilement de l'horizon apparaît est d'environ 940px, de sorte que vous pouvez considérer la largeur 940px comme un point d'rupture. Lorsque l'écran est plus étroit que cela (par exemple dans une tablette), nous avons besoin de réduire le contenu dans l'iFrame.

         var iframe_threshold 940;
         changement de fonctionIframeSize()
          var div_width ''#my_div').largeur();
          si (div_width iframe_threshold){>
              var div_height '''#my_div''''''#my_div).' height();
              $(«#my_iframe»div_width div_height iframe_threshold).
              $("#my_iframe iframe_threshold").
             ratio var div_width/iframe_threshold;
             setIframeRatio(ratio);
         D’autres
             $("#my_iframe").
             $("#my_iframe").
             setIframeRatio(");
         }     
         }

À partir du code, nous avons d'abord calculé la hauteur et la largeur réelles lorsque l'iFrame est plus étroit que le seuil. Ensuite, nous avons obtenu le ratio de réduction: div_width/iframe_threshold qui est le ratio que nous voulons suivre lors de la réduction du contenu de iFrame dans la fonction ci-dessous setIframeRatio().

fonction setIframeRatio(ratio)
             si (ratio)
                 ratio 'échelle'('ratio'')';
         }
             $("#my_iframe").
             $("#my_iframe").
             $("#my_iframe").
             $("#my_iframe").
             $("#my_iframe").
         }

Cet extrait de code permet de s'assurer que notre style CSS est compatible avec les principaux navigateurs tendance.

Maintenant, nous allons vérifier le résultat ensemble:

Obtenez le code complet ici.

Voilà, c'est toi qui l'as. Nous avons créé avec succès une fenêtre iFrame réactive. N'hésitez pas à modifier le code comme bon vous semble.

Si vous avez des questions concernant ce blog ou toute autre chose concernant l'intégration de OneSpan Sign dans votre application, visitez les Forums communautairesdes développeurs .