Dynamic Iframe Generator In Pure JavaScript – iFrameX

Preview:

Description:

The iFrameX JavaScript library enables the developer to dynamically generate an iframe in which you can insert any web content with attributes.

How to use it:

Download and load the main JavaScript file iframex.js into the document.

<script src="/src/iframex.js"></script>

Define the content to be displayed in the iframe.

const content = { 
  attr: { 
    width: '100%',
    height: '600',
    class: 'nice-iframe'
  },
  content: [
    {
      type: 'link',
      append: 'head',
      attr: {
        href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
        rel: 'stylesheet'
      }
    },
    {
      type: 'script',
      append: 'head',
      attr: {
        src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'
      }
    },
    {
      type: 'div',
      content: 'A simple primary alert—check it out!',
      attr: {
        class: 'alert alert-primary',
        role: 'alert'
      }
    },
    {
      type: 'h1',
      append: 'div.alert',
      content: 'Hi',
      attr: {
        class: 'mydiv'
      }
    },
    {
      type: 'script',
      content: `alert('The content of script injected is succesful')`
    },
    {
      type: 'script',
      content: `alert('All great!')`,
      attr: {
        async: true
      }
    },
  ],
  config: {
    debug: true,
    action: (msg) => { alert(msg.data) } 
  } 
};

Generate an iframe on the page.

iframe = new iFrameX(content);
iframe.init();

enables cross-origin communication between iframes and parent.

document.querySelector('[iframe-id="${id}"]').contentWindow.postMessage('Your Message', '*');
document.querySelector('[iframe-id="${id}"]').contentWindow.postMessage({msg: 'My text'}, '*');
window.parent.postMessage('Your Message', '*');
window.parent.postMessage({msg: 'My text'}, '*');