Portals Rendering in IFRAME

App.md

React Portals Rendering in IFRAME

(using ES6 classes)

index.html

<!-- Our App will reside here -->
<div id="app"></div>
<br />
<iframe id="myIframe" src="about:blank"></iframe>
<script>
   var aDoc = document.getElementById("myIframe").contentWindow.document;
   aDoc.open("text/html", "replace");
   aDoc.write("<div id='result'></div>");
   aDoc.write("<link type='text/css' rel='stylesheet' href='https://codepen.io/kcak11/pen/ZEGoNNe.css?ts=" + new Date().getTime() + "'/>");
   aDoc.close();
</script>
<br />
<span class="hooksImpl">For an implementation using "React Hooks" see this <a href="https://codepen.io/kcak11/pen/MWwBvEB" target="_blank">PEN</a></span>

portals-experiment.markdown

Portals Experiment

A Pen by K.C.Ashish Kumar on CodePen.

License.

portals-rendering-in-iframe.markdown

Portals Rendering in IFRAME

This pen showcases an example of rendering content across IFRAME(s) via the React Portals mechanism.

A Pen by K.C.Ashish Kumar on CodePen.

License.

script.babel

"use strict";

class SomeApp extends React.Component {
   render() {
      return (
         <React.Fragment>
            <h2>Content rendered via Portal from outer frame</h2>
            <button onClick={this.props.clearContentsHandler}>
               Clear Contents
            </button>
         </React.Fragment>
      );
   }
}

class SomeAppRenderer extends React.Component {
   render() {
      const doc = document.getElementById("myIframe").contentWindow.document;
      return ReactDOM.createPortal(
         <SomeApp clearContentsHandler={this.props.clearContentsHandler} />,
         doc.getElementById("result")
      );
   }
}

class MyApp extends React.Component {
   constructor(props) {
      super(props);
      this.doIframeDisplay = this.doIframeDisplay.bind(this);
      this.clearContents = this.clearContents.bind(this);
      this.state = {};
   }
   doIframeDisplay() {
      this.setState({ buttonClicked: true });
   }
   clearContents() {
      this.setState({ buttonClicked: false });
   }
   render() {
      return (
         <div>
            <h1>React App in outer frame</h1>
            <button
               onClick={this.doIframeDisplay}
               disabled={this.state.buttonClicked}
            >
               Click to render contents in Iframe
            </button>
            {this.state.buttonClicked ? (
               <SomeAppRenderer clearContentsHandler={this.clearContents} />
            ) : (
               ""
            )}
         </div>
      );
   }
}

/* The React app gets mounted here */
ReactDOM.render(<MyApp />, document.getElementById("app"));

scripts

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

style.css

#app,
iframe {
   border: 2px solid #000;
   width: 400px;
   height: 200px;
}

button {
   color: #fff;
   background-color: blue;
   width: 200px;
   height: 40px;
   margin: 10px;
}

style.less

@foregroundColor: #1064ea;

body {
   font-family: Verdana;
   color: @foregroundColor;
}

#app,
iframe {
   padding: 10px;
   border: 2px solid @foregroundColor;
   width: 500px;
   height: 200px;
}

iframe {
   border-style: dashed;
}

button {
   color: #fff;
   background-color: @foregroundColor;
   font-weight: bold;
   border-radius: 100px;
   border: 2px solid #000;
   box-sizing: border-box;
   box-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000,
      0 0 7px #fff inset, 0 0 7px #fff inset, 0 0 7px #fff inset,
      0 0 7px #fff inset;
   padding: 5px;
   width: 250px;
   height: 40px;
   margin: 10px;
   outline: none;
   cursor: pointer;
   &:hover {
      background-color: #000;
   }
   &[disabled] {
      background-color: @foregroundColor;
      opacity: 0.25;
      cursor: not-allowed;
   }
}

.hooksImpl {
   display: inline-block;
   margin-top: 20px;
   a {
      text-decoration: none;
      border-bottom: 2px solid #000;
      color: @foregroundColor;
   }
}