Skip to content
Javascript Iframe generator with dynamic content injection like HTML, Javascript, CSS, etc. and postMessage included for two ways communications iframe <-> parent.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist FIX:New update May 15, 2019
examples FIX: Change position of scripts May 15, 2019
src FIX:Add elements to Firefox May 15, 2019
.gitattributes
LICENSE Initial commit May 15, 2019
README.md FIX:Added index and known bugs May 15, 2019
_config.yml Set theme jekyll-theme-cayman May 15, 2019

README.md

iFrameX

iFrameX is a javascript class for generate iframes with a really simple schema, also have a EventListener natively for postMessages.

This library is not compatible with IE11. Is designed only for modern browsers.

🚨 CAUTION! Never send password or credentials via postMessages, can be intercepted by others scripts.

Index

Demo

Demo here

How to use

Use iFrameX is really easy only need two things:

const iframe = new iFrameX({...}); // ... is the configuration
iframe.init();

Configuration

Configuration is a object can accept these parameters:

  • attr: Object with attributes of iframe,
  • content: Object or Array with a content of iframe,
  • append: String of element where append iframe in query format,
  • config: Object with some settings parameters,

attr

attr: {
  width: 100,
  height: 100,
  class: 'myiframe'
},

content

This allow add elements in Object format. Can set these parameters:

  • type: String value of element to create. REQUIRED,
  • append: String value of element where append the new element to create. By default is body. OPTIONAL,
  • content: String value of content element, can be HTML, Javascript, CSS, etc. OPTIONAL,
  • attr: Object value of attibutes of element. OPTIONAL

Object example

content: {
  type: script,
  append: 'body'
  content: `alert('This executed from iframe')`,
  attr: {
    async: true
  },
},

Array example

content: [
  {
    type: 'script',
    append: 'body',
    content: `alert('This executed from iframe')`,
    attr: {
      async: true
    },
  },
  {
    type: 'link',
    append: 'head',
    attr: {
      href: 'https://cdn.example.com/assets/css/main.css' ,
      rel: 'stylesheet'
    },
  },
  {
    type: 'button',
    content: `My button`,
    attr: {
      class: 'mybutton',
      onclick: 'myFunction()'
    },
  },
]

append

Set where is appended the iframe and the append value need be in elements query selector format. Read more about elements query selector format here.

append: 'body',
append: '#myid',
append: '[data-id="893283420949032"]',

config

In config parameters you can activate debug mode true/false for show errors and set the action function for postMessage.

config: {
  debug: true,
  action: function (msg) {
    // Your function code. Please read more about postMessage - https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  },
},

Send postMessage

From parent to iframe

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

From iframe to parent

window.parent.postMessage('Your Message', '*');
window.parent.postMessage({msg: 'My text'}, '*');

Some known bugs

If have error with injection of content, try change order in object content of scripts that block the DOM draw, and move to the final. For example alert('hi') block DOM drawing, try move to the final and works!.

Issue #1.

License

MIT Lincense - By Matias Lopez for Videsk™

You can’t perform that action at this time.