Rely on DOMContentLoaded instead of onload (#207)

* Rely on DOMContentLoaded instead of onload onload event will delay if downloading external resources when really all we need to know is if the initialContent has rendered without worry about external resources being downloaded Fallback to setInterval if DOMContentLoaded fails
ryanseddon · Dec 31, 2022 · 334d0ef · 334d0ef
1 parent 827f73a
commit 334d0ef
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 21 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -14,6 +14,7 @@
   "parser": "babel-eslint",
   "rules": {
     "react/forbid-prop-types": "off",
+    "react/prop-types": [0, { "ignore": ["children"]}],
     "no-underscore-dangle": "off"
   }
 }
diff --git a/example/app.jsx b/example/app.jsx
@@ -2,15 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Frame from '../src';
 
-var styles = {
+const styles = {
   border: '1px solid',
   width: '100%',
   height: '100%'
 };
 
 const Header = ({ children }) => <h1>{children}</h1>;
 
-const Content = ({ children }) => <section>{children}</section>
+const Content = ({ children }) => <section>{children}</section>;
 
 const App = () => (
   <div>
@@ -21,15 +21,46 @@ const App = () => (
   </div>
 );
 
-ReactDOM.render(<Frame style={styles}><App /></Frame>, document.querySelector('#example1'));
-
-const Foobar = () => (
-  <Frame style={styles} head={
-    <style>{'*{color:red}'}</style>
-  }>
-    <h1>Frame example of wrapping component</h1>
-    <p>This is also showing encapuslated styles. All text is red inside this component.</p>
-  </Frame>
+ReactDOM.render(
+  <Frame style={styles}>
+    <App />
+  </Frame>,
+  document.querySelector('#example1')
 );
 
+const Foobar = () => {
+  const [toggle, updateToggle] = React.useState(false);
+  return (
+    <Frame style={styles} head={<style>{'*{color:red}'}</style>}>
+      <h1>Frame example of wrapping component</h1>
+      <p>
+        This is also showing encapuslated styles. All text is red inside this
+        component.
+      </p>
+      {toggle && <h2>Hello</h2>}
+      <button onClick={() => updateToggle(!toggle)}>Toggle</button>
+    </Frame>
+  );
+};
+
 ReactDOM.render(<Foobar />, document.querySelector('#example2'));
+
+const ExternalResources = () => {
+  const initialContent = `<!DOCTYPE html><html><head>
+	<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+	<base target=_blank>
+  </head><body style='overflow: hidden'><div></div></body></html>`;
+
+  return (
+    <Frame initialContent={initialContent}>
+      <h1>External Resources</h1>
+      <p>
+        This tests loading external resources via initialContent which can
+        create timing issues with onLoad and srcdoc in cached situations
+      </p>
+    </Frame>
+  );
+};
+
+ReactDOM.render(<ExternalResources />, document.querySelector('#example3'));
diff --git a/example/index.html b/example/index.html
@@ -7,11 +7,12 @@
         * {
             color: blue;
         }
-        section {
-            display: flex;
+        iframe {
+          width: 100%;
         }
-        section div {
-            flex: 1;
+        section {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
         }
     </style>
 </head>
@@ -21,6 +22,7 @@ <h1>&lt;Frame /> examples</h1>
   <section>
       <div id="example1"></div>
       <div id="example2"></div>
+      <div id="example3"></div>
     </section>
 </body>
 </html>
diff --git a/src/Frame.jsx b/src/Frame.jsx
@@ -44,17 +44,22 @@ export class Frame extends Component {
     this._isMounted = true;
 
     const doc = this.getDoc();
-    if (doc && doc.readyState === 'complete') {
-      this.forceUpdate();
-    } else {
-      this.nodeRef.current.addEventListener('load', this.handleLoad);
+
+    if (doc) {
+      this.nodeRef.current.contentWindow.addEventListener(
+        'DOMContentLoaded',
+        this.handleLoad
+      );
     }
   }
 
   componentWillUnmount() {
     this._isMounted = false;
 
-    this.nodeRef.current.removeEventListener('load', this.handleLoad);
+    this.nodeRef.current.removeEventListener(
+      'DOMContentLoaded',
+      this.handleLoad
+    );
   }
 
   getDoc() {
@@ -81,9 +86,19 @@ export class Frame extends Component {
   };
 
   handleLoad = () => {
-    this.setState({ iframeLoaded: true });
+    clearInterval(this.loadCheck);
+    // Bail update as some browsers will trigger on both DOMContentLoaded & onLoad ala firefox
+    if (!this.state.iframeLoaded) {
+      this.setState({ iframeLoaded: true });
+    }
   };
 
+  // In certain situations on a cold cache DOMContentLoaded never gets called
+  // fallback to an interval to check if that's the case
+  loadCheck = setInterval(function loadCheckCallback() {
+    this.handleLoad();
+  }, 500);
+
   renderFrameContents() {
     if (!this._isMounted) {
       return null;
@@ -130,6 +145,7 @@ export class Frame extends Component {
     delete props.contentDidMount;
     delete props.contentDidUpdate;
     delete props.forwardedRef;
+
     return (
       <iframe {...props} ref={this.setRef} onLoad={this.handleLoad}>
         {this.state.iframeLoaded && this.renderFrameContents()}

diff --git a/webpack.config.js b/webpack.config.js
@@ -24,5 +24,10 @@ module.exports = {
     loaders: [
       { test: /\.js(x|)/, loaders: ['babel-loader'], exclude: /node_modules/ }
     ]
+  },
+  devServer: {
+    headers: {
+      'Cache-Control': 'max-age=10'
+    }
   }
 };