requirebin sketch

index.js

var
  iframe = document.createElement("iframe");

iframe.src = "http://localhost:5000/";
iframe.style.width = "320px";
iframe.style.height = "568px";
document.body.appendChild(iframe);



var container = document.createElement("div")
container.id = "result"
document.body.appendChild(container);


var RPC = require('frame-rpc');
var frame = document.querySelector('iframe');
var usrc = new URL(frame.getAttribute('src'));
var origin = usrc.protocol + '//' + usrc.host;




frame.addEventListener('load', function (ev) {
    var rpc = RPC(window, frame.contentWindow, origin);
  
  var remoteConfigure = {
    run: function (method, options, callback) {
      if (arguments.length === 3) {
        options = [options, calllback];
      }
	    rpc.call(method, options);
    }
  };

  window.parent.remoteConfigure = remoteConfigure;
  
  setTimeout(function () {
    
    remoteConfigure.run("randomizeRecipe", function (result) {
			 				document.querySelector('#result').textContent = result;
      console.log(result);
      
    });
  
  }, 500);
});

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var hasOwn=Object.prototype.hasOwnProperty;module.exports=function has(obj,property){return hasOwn.call(obj,property)}},{}],2:[function(require,module,exports){module.exports=Array.isArray||function(arr){return Object.prototype.toString.call(arr)=="[object Array]"}},{}],"frame-rpc":[function(require,module,exports){var has=require("has");var isarray=require("isarray");var VERSION="1.0.0";module.exports=RPC;function RPC(src,dst,origin,methods){if(!(this instanceof RPC))return new RPC(src,dst,origin,methods);var self=this;this.src=src;this.dst=dst;if(origin==="*"){this.origin="*"}else{var uorigin=new URL(origin);this.origin=uorigin.protocol+"//"+uorigin.host}this._methods=methods||{};this._sequence=0;this._callbacks={};this._onmessage=function(ev){if(self._destroyed)return;if(self.origin!=="*"&&ev.origin!==self.origin)return;if(!ev.data||typeof ev.data!=="object")return;if(ev.data.protocol!=="frame-rpc")return;if(!isarray(ev.data.arguments))return;self._handle(ev.data)};this.src.addEventListener("message",this._onmessage)}RPC.prototype.destroy=function(){this._destroyed=true;this.src.removeEventListener("message",this._onmessage)};RPC.prototype.call=function(method){var args=[].slice.call(arguments,1);return this.apply(method,args)};RPC.prototype.apply=function(method,args){if(this._destroyed)return;var seq=this._sequence++;if(typeof args[args.length-1]==="function"){this._callbacks[seq]=args[args.length-1];args=args.slice(0,-1)}this.dst.postMessage({protocol:"frame-rpc",version:VERSION,sequence:seq,method:method,arguments:args},this.origin)};RPC.prototype._handle=function(msg){var self=this;if(self._destroyed)return;if(has(msg,"method")){if(!has(this._methods,msg.method))return;var args=msg.arguments.concat(function(){self.dst.postMessage({protocol:"frame-rpc",version:VERSION,response:msg.sequence,arguments:[].slice.call(arguments)},self.origin)});this._methods[msg.method].apply(this._methods,args)}else if(has(msg,"response")){var cb=this._callbacks[msg.response];delete this._callbacks[msg.response];if(cb)cb.apply(null,msg.arguments)}}},{has:1,isarray:2}]},{},[]);var iframe=document.createElement("iframe");iframe.src="http://localhost:5000/";iframe.style.width="320px";iframe.style.height="568px";document.body.appendChild(iframe);var container=document.createElement("div");container.id="result";document.body.appendChild(container);var RPC=require("frame-rpc");var frame=document.querySelector("iframe");var usrc=new URL(frame.getAttribute("src"));var origin=usrc.protocol+"//"+usrc.host;frame.addEventListener("load",function(ev){var rpc=RPC(window,frame.contentWindow,origin);var remoteConfigure={run:function(method,options,callback){if(arguments.length===3){options=[options,calllback]}rpc.call(method,options)}};window.parent.remoteConfigure=remoteConfigure;setTimeout(function(){remoteConfigure.run("randomizeRecipe",function(result){document.querySelector("#result").textContent=result;console.log(result)})},500)});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "frame-rpc": "1.2.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin