How to use iframe-resizer - 10 common examples

import './styleguide.scss';
import { iframeResizer } from 'iframe-resizer';
// import * as hljs from 'highlightjs';
import $ from 'jquery';

const iframes = iframeResizer();
// hljs.initHighlightingOnLoad();

const variants = $('.variant');

if (variants.length) {
  variants.each(function() {
    const variant = $(this);
    const toggles = variant.find('.variant__toggle');
    const panels = variant.find('.variant__panel');
    toggles.on('click', function() {
      iframes.forEach(iframe => iframe.iFrameResizer.resize());
      const toggle = $(this);
      const target = variant.find(toggle.attr('href'));
      toggles.removeClass('is-active');
      toggle.addClass('is-active');

$(document).on('pages:advance pages:rewind', '.page-section', function (e, options) {
  var $pagedots = $('.page-dots')
  var $dots = $pagedots.children()
  $dots.removeClass('-active')
  $pagedots.toggleClass('-hide', options.index === 0)

  // Never select the first dot.
  $dots.eq(Math.max(options.index, 1)).addClass('-active')
})

/*
 * iframe
 */

var iFrameResize = require('iframe-resizer')
iFrameResize.iframeResizer({
  resizedCallback: function () {
    $(window).trigger('resize')
  }
}, 'iframe[seamless]')

/*
 * On hash change
 */

void (function () {
  $(window).on('hashchange', onHashChange)
  $(document).on('click', 'a[href^="#"]', onClick)

  function onHashChange (e) {
    navigateToHash(window.location.hash)
  }

const setUpIframeResizer = (el: HTMLIFrameElement | null, initialHeight: string) => {
    if (el) {
      setHeightImportant(el, initialHeight);
      if (isIframeSetUp) {
        return;
      }
      iframeResizer(
        {
          heightCalculationMethod: "taggedElement", // looks for elements with `data-iframe-height` attribute and resizes to fit them
          tolerance: 25,

          // @ts-ignore iframe-resizer types are missing the event handlers and some other options
          warningTimeout: 20000,
          // @ts-ignore
          onResized: ({ iframe, height }: { iframe: HTMLIFrameElement; height: string }) => {
            setIframeHeight(parseInt(height, 10) + 20 + "px");
          },
          // @ts-ignore
          onInit: () => {
            setIsLoaded(true);
          },
        },
        el,

useEffect(() => {
    const iframe = iframeRef.current

    iframeResize({ ...rest, onClose }, iframe)

    return () => iframe.iframeResizer && iframe.iframeResizer.removeListeners()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

$(document).ready(function(){
  // Display glossary-modal
  $("#content-container, #glossary-modal").on("click", ".glossary-term", open_glossary_definition);

  // If anchor link in URL, move page up to avoid link being covered by navbar
  window.addEventListener("hashchange", function() { scrollBy(0, -72) })

  // Pause YouTube videos playing within a closed details elements
  $("body").on("click", "details[open]", details_element_closed);

  iFrameResize({}, 'iframe.iframe-resize');
});

function testTwo(): void {
  const iframe: HTMLIFrameElement = document.createElement('iframe');
  const components: iframeResizer.IFrameComponent[] = iframeResizer({
    initCallback: () => {
      console.log('Init');
    },
    closedCallback: () => {
      console.log('Closed');
    }
  }, iframe);
  if (components) {
    components.forEach(component => console.log(component.iFrameResizer));
  } else {
    console.log("No components");
  }
}

function testOne(): void {
  const iframe: HTMLIFrameElement = document.createElement('iframe');
  const options: iframeResizer.IFrameOptions = { log: true };
  const components: iframeResizer.IFrameComponent[] = iframeResizer(options, iframe);
  if (components) {
    components.forEach(component => console.log(component.iFrameResizer));
  } else {
    console.log("No components");
  }
}

function testThree(): void {
  iframeResizer({}, '.my-iframe');
}

function() {
                      iframeResizer(null, 'iframe')
                    }.bind(this)
                  )

template: target.template,
    resizer: iframeResizerContentWindow,
    loader: createLoader(config)
  })

  const player = await sandbox(target.node, playerDom)
    .then(
      setStyles({
        transition: 'all 500ms'
      })
    )
    .then(resize(target.node))

  setAccessibilityAttributes(config, player)

  iframeResizer(
    {
      checkOrigin: false,
      log: false
    },
    player
  )

  const store = prop('PODLOVE_STORE', sandboxWindow(player))

  return store
}