OneSpan Sign Developer: Responsive iFrame in HTML Page

iFrames are a versatile tool when developing with OneSpan Sign. For example, you can embed Designer View into an iFrame, which provides an easy way to embed the signature placement and document review experience in your own web page. Alternatively, you can embed a signing ceremony into an iFrame to create a more flexible experience for your customer on any device and better control your workflow.

Sometimes, however, the iFrame window is too narrow. This forces the user to have to scroll horizontally to read a document, which is not the ideal user experience we want to create.

In this blog, we will demonstrate how to make a responsive iFrame. We have two goals in this demo: first, we want our iFrame window to be a relatively fixed rate of the whole window page (73% width and fixed 77px from the top, sticking to left-bottom corner), then second we want to avoid this horizontal scroll issue. 

First, we need an iFrame within a div whose CSS style could meet our requirement above: 73% width of the screen, fixed 77px from the top and sticking to the left-bottom corner.

<div id="my_div" style="border:1px;position:fixed;width:73%;height:auto;right:5px;bottom:5px;top:77px;"><iframe id="my_iframe" src="https://sandbox.esignlive.com/access?sessionToken=YTY0N2ZmMTQtNzBxxxxxxxxxxxxxxxxxMmE3" style=" border:1px solid black;transform-origin: top left;  position: relative;  height: 100%; width:100%;"></iframe></div>

In Javascript, after completely loading the page or every time the browser is resized, we need to add a listener for the event:

        $(function(){
             changeIframeSize();
         })
         window.onresize = function(event) {
             changeIframeSize();
          };

The threshold width when the horizon scroll bar shows up is around 940px, so you can consider 940px width as a breakpoint. When the screen is narrower than that (for example in a tablet), we need to shrink contents in the iFrame.

         var iframe_threshold = 940;
         function changeIframeSize(){
          var div_width = $('#my_div').width();
          if(div_width < iframe_threshold){
              var div_height = $("#my_div").height();
              $("#my_iframe").height(iframe_threshold*div_height/div_width+"px");
              $("#my_iframe").width(iframe_threshold + 'px');
             var ratio = div_width/iframe_threshold;
             setIframeRatio(ratio);
         }else{
             $("#my_iframe").css("height","100%");
             $("#my_iframe").css("width","100%");
             setIframeRatio("");
         }     
         }

From the code, we first calculated the actual height and width when the iFrame is narrower than the threshold. Then, we obtained the shrink ratio: div_width/iframe_threshold which is the ratio we want to follow when shrinking the content of iFrame in the below function setIframeRatio().

function setIframeRatio(ratio){
             if(ratio){
                 ratio = 'scale('+ratio+')';
         }
             $("#my_iframe").css('transform',ratio);
             $("#my_iframe").css('-ms-transform',ratio);
             $("#my_iframe").css('-moz-transform',ratio);
             $("#my_iframe").css('-o-transform',ratio);
             $("#my_iframe").css('-webkit-transform',ratio);
         }

This code snippet makes sure that our CSS style is compatible with main trend browsers.

Now let’s check the outcome together:

Get the Complete Code here.

There you have it. We have successfully created a responsive iFrame window. Feel free to modify the code as you see fit.

If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums.