Investigate Embedding UI as Iframe

[morsdyce]

Investigate embedding the UI as an Iframe while still being able to communicate with the local API to capture requests and forward them to the UI.

[alexilyaev]

@ilyagelman @morsdyce Should work just fine, add this to any page to test (ES6 must be supported):

/**
 * Shredder API Dummy
 */

window.Shredder = {
  sayHi: (one, two) => {
    console.log('API sayHi', one, two);
  }
};

/**
 * Add an iFrame element for the Shredder UI
 */

let iframeElm = document.createElement('iframe');
iframeElm.src = '';
iframeElm.width = '100%';
iframeElm.height = '100%';

document.body.appendChild(iframeElm);

/**
 * Get the iFrame's document, body and head
 */

let iframeRoot = iframeElm.contentDocument;
let iframeBody = iframeRoot.body || iframeRoot.querySelector('body');
let iframeHead = iframeRoot.querySelector('head') || iframeBody;

/**
 * Prepare Shredder UI Styles
 */

let uiStyle = document.createElement('style');
uiStyle.textContent = `
  h1 {
    background: lightblue;
  }
`;

/**
 * Prepare Shredder UI View
 */

let uiHtml = document.createElement('div');
uiHtml.innerHTML = `
  <div>
    <h1>Bad Ass API Mocking</h1>
  </div>
`;

/**
 * Prepare Shredder UI Code
 */

let uiScript = document.createElement('script');
uiScript.type = 'text/javascript';
uiScript.text = `
  // Execute methods from the Shredder API
  window.parent.Shredder.sayHi('Foo', 'Bar')
`;

/**
 * Inject the Shredder UI
 */

iframeBody.appendChild(uiHtml);
iframeHead.appendChild(uiStyle);
iframeBody.appendChild(uiScript);

Open questions

• The code and styles must be post transpilation, that's no issue on production, we could have them as strings and just inject them, but how would it work in development?
• We would still need some CSS to position the iframe and handle showing/hiding it, this would have to be added to the original page, the iframe styles would have to be as explicit as possible to avoid external styles from affecting it.

[ilyagelman]

@alexilyaev What about mocking xhr requests within iframe?

[alexilyaev]

@ilyagelman You don't, you mock them outside as usual, the iFrame is just the carrier that will communicate with the Shredder API.

[alexilyaev]

Maayan wrote:
Please keep in mind for whoever implements the iframe, you need to test it in both loading scenarios.

1. Global var via script injection
2. Common js import (no global var is created at this method currently)

[morsdyce]

+1 for including this here.

On Wed, Dec 2, 2015 at 7:47 PM, Alex Ilyaev notifications@github.com
wrote:

Maayan wrote:
Please keep in mind for whoever implements the iframe, you need to test it
in both loading scenarios.

1. Global var via script injection
2. Common js import (no global var is created at this method currently)

—
Reply to this email directly or view it on GitHub
#22 (comment).

[alexilyaev]

@ilyagelman Does it work with the 2 points Maayan mentioned?