frame observer

This is iframe observer. Be Able to use it when you need get frame states or event listeners.

You need to add polyfill script if your browser is not support es6.

Install

bower install frame-observer

Install node modules

npm install frame-observer

Usage

index.html

var iframe = document.querySelector('iframe');
var promise = frameObserver.callMethod( iframe, "info", {a:3} );

promise.then(function(){
  console.log( arguments );
});

frame.html

frameObserver.registerMethods({

  info:function( promise ){
    promise.resolve(1);
  }
});

API

frameObserver

readyState( iframe, stateName ):Promise

listen a state from frame, promise will be trigger when state is resolved or rejected.

var iframe = document.querySelector('iframe');

frameObserver
.readyState( iframe, 'ready' )
.then(function(){
  console.log('ready state:done...');
},function(){
  console.log('ready state:fail...');
});

resolveState( stateName, params... )

trigger a state for resolve.

frameObserver.resolveState('ready');

rejectState( stateName, params... )

trigger a state for reject.

frameObserver.rejectState('ready');

on( iframe, eventName, func )

listen a event from frame.

var iframe = document.querySelector('iframe');

frameObserver.on( iframe, 'iframeClicked', function(){
  console.log('iframe clicked');
});

off( iframe, eventName, func )

unregister a event from frame.

frameObserver.off( iframe, 'iframeClicked', iframeClicked );

registerMethods( methods )

implement some methods for other iframes. The method inputs will inject promise and parameters.

frameObserver.registerMethods({
  hello:function(promise, parameter1, parameter2 ...){
    console.log('hello by self');
  }
});

callMethod( iframe, methodName, params... ):Promise

call a method of iframe or parent.

var promise = frameObserver.callMethod( iframe, "hello", {a:3} );

promise.then(function(){
  console.log( arguments );
});

trigger( name, params... )

trigger a event

frameObserver.trigger( 'clicked' );

getContext(el):FrameObserverContext

get a el context

frameObserver.getContext(iframe);

FrameObserverContext

on(eventName, func)

listen a event from context.

off(eventName, func)

unregister a event from context.

readyState(stateName):Promise

listen a state from context.

callMethod(methodName, params...):Promise

call a method of context.

getElement():HTMLElement

get a element from context.

Run Server

npm run dev

Build minfy

npm run build

Test

npm run test