Documentation

Embed

Dynamic iframe Height Code Example

Dynamic iframe Height Code Example to help avoid scroll traps

Listen for postmessage when height is changed by responsive design and set the new height from the host page side

Single iframe:


<html>

    <head>   

          <script>

             window.addEventListener("message", receiveMessage, false);

                  function receiveMessage(event) {

                  //if we get some data back

                  if (event.data && event.data.params && event.data.params.height) 

     document.getElementById("iframe1").style.height = event.data.params.height;

                 }   

    </script>

     </head>

     <body>   

           <iframe id="iframe1" src="https://api.dev.domo.com/embed/pages/aQpYe" width="100%" height="1620" marginheight="0" marginwidth="0" frameborder="0"></iframe>

     </body>
</html>

Multiple iframes:

(loop through the responses and determine which came from which source. Add a couple additional px to the height in order to take into account scroll bars that could just barely push things into a scrollable state)


<html>

     <head>

          <script>

               window.addEventListener("message", receiveMessage, false);

               function receiveMessage(event) {

                    var frames = document.getElementsByTagName('iframe');

                    for (var i =0; i <frames.length; i++) {

                         if (frames[i].contentWindow === event.source) {

                              if (event.data && event.data.params && event.data.params.height) frames[i].style.height = event.data.params.height + 15;

                              }

                    }

               }

           </script>

     </head>

     <body>

          <iframe id="iframe1" src="https://public.domo.com/embed/pages/e0wGG"width="100%" height="1620" marginheight="0" marginwidth="0" frameborder="0"></iframe>

          <iframe id="iframe2" src="https://public.domo.com/embed/pages/avV2X"width="100%" height="1620" marginheight="0" marginwidth="0" frameborder="0"></iframe>

     </body>
</html>