title: Framer tagline: automagic iframes date: 2020-11-08 00:00:00 +100 description: >

Test page for J1 module framer. Framer enables the automatic
resizing of the height and width of both same and cross domain
iFrames to fit their contained content. It provides a range of
features to address the most common issues with using HTML iFrames.

categories: [ Previewer ] tags: [ HTML, Frame, iframe ]

toc: false

permalink: /pages/public/iframer/ regenerate: false

resources: [ framer, fam ] resource_options:

- attic:
    padding_top:                      400
    padding_bottom:                   50
    opacity:                          0.5
    slides:
      - url:                          /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
        alt:                          Photo by Jessica Ruscello Unsplash

# caption: # text: Photo by Jessica Ruscello on Unsplash # href: unsplash.com/@jasonrosewell

badge:
  type:                       unsplash
  author:                     Jessica Ruscello
  href:                       https://unsplash.com/@jruscello

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Automagic iFrame

Resize window or click one of the links in the iFrame to watch it resize.

++++ <p id=“callback” class=“ml-2”></p>

<iframe

src="/assets/themes/j1/modules/iframeResizer/examples/frame.content.html"
width="100%"
style="border-width:0;"
scrolling="no"
title="Test Content">

</iframe>

<script>

$(document).ready(function() {
  var dependencies_met_page_finished = setInterval (function () {
    if (j1.adapter.framer.getState() === 'finished') {
      iFrameResize({
        log:       true,
        minHeight: 250,
        onResized: function(messageData){

          $('p#callback').html(
            '<b>Frame ID:</b> '    + messageData.iframe.id +
            ' <b>Height:</b> '     + messageData.height +
            ' <b>Width:</b> '      + messageData.width +
            ' <b>Event type:</b> ' + messageData.type
          );
        },
        onMessage: function(messageData){

          $('p#callback').html(
            '<b>Frame ID:</b> '    + messageData.iframe.id +
            ' <b>Message:</b> '    + messageData.message
          );
          alert(messageData.message);
          document.getElementsByTagName('iframe')[0].iFrameResizer.sendMessage('Hello back from parent page');
        },
        onClosed: function(id){
          $('p#callback').html(
            '<b>IFrame (</b>'    + id +
            '<b>) removed from page.</b>'
          );
        }
      });
      clearInterval(dependencies_met_page_finished);
    }
  }, 25);
});

</script> ++++