Repository files navigation

iFrameX is a javascript class for generate iframes with a really simple schema, also have a custom event listener.

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

🚨CAUTION! Never send passwords or credentials via a custom event, can be intercepted by others scripts.

• Demo
• How to use
• Params
  • attributes
  • content
  • container
  • options
    • debug
    • action
• Custom event listener and PostMessage
• Some known bugs
• License

Demo here

Use iFrameX is really easy, only need do two things:

constiframe=newiFrameX(options);iframe.create();

Params is an object can accept these parameters:

• attributes:Object with attributes of iframe.
• content:Object orArray with a content of iframe.
• container:String orDOM element where append iframe in query format.
• options:Object with some settings parameters.

constattributes={width:100,height:100,class:'myiframe'};

This allows adding elements inObject schema. Can set these parameters in object:

• type:String value of element to create.REQUIRED
• append:String value of element where append the new element to create. By default isbody.OPTIONAL
• content:String value of content element, can beHTML,Javascript,CSS, etc.OPTIONAL
• attr:Object value of attributes of element.OPTIONAL

Object example

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

Array example

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

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

By default, will be appended intobody tag.

constappend='#myid';constappend='[data-id="893283420949032"]';constappend=document.querySelector('#my-container');

In options parameter you can set:

• ìd:String Custom if of iFrame
• eventName:String Custom event name from iframe
• gateway:Function Function to handle the custom event from iframe

constoptions={id:'my-custom-iframe-id',eventName:'MyCustomEventName',gateway:functionHandleEvent(data){doSomething(data);},};

This provides the ability of listen custom events from iframe in a simple way.

To use it you need seteventName inoptions andgateway with a function can handle the event.

If you want provide states of HTML elements, data or anything you want from iframe to parent can use this feature, like this:

constoptions={eventName:'CustomEventName',gateway:functionHandleEvent(data){// Here data schema depend how you send from iframedoSomething(data);},};// Example content code in multiple lines(()=>{// This is how you can send from iframe to parentconstevent=newCustomEvent("CustomEventName",{detail:{date:newDate()}});window.parent.document.dispatchEvent(event);})();constcontent={type:'script',content:'(() => window.parent.document.dispatchEvent(new CustomEvent("CustomEventName", { detail: {date: new Date()} })))()',// Example content in one line};constiframe=newIframeX({content, options});iframe.create();

The above example code, create an iframe and when this will render, sent custom eventCustomEventName with data, that contains anObject withdate: new Date(). (Obviously data is completely customizable)

To listen events in iframe that comes from outside is really simple:

In iframe

functionnewMessage(event){constdata=event.detail;doSomething(data);}window.addEventListener('CustomEventName',newMessage);

In parent

iframe.sendMessage('CustomEventName',{date:newDate()});

Is too important the event listener on iframe will set before send the event from the parent. Is highly recommended set event listener on iframe before all scripts on the body!

Because you need setmessage listener before iframe will render on a parent. And can't create multiples custom events before and after iframe was rendered.

That means pass all data via PostMessage making too complex handle different events and data.

If you're curious is possible handle multiple events with PostMessage with the following schema:

window.addEventListener('message',newMessage);functionnewMessage(event){const{event, data}=event.data;eventHandler(event,data);// In this function need use if or key object access by event name.}

You can use PostMessage in parallel with iFrameX!

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

Issue #1.

LGPL-2.1 License - By Videsk™