Seamlessly Integrating Micro Apps with iFrame

Jun 25, 2020

Seamlessly Integrating Micro Apps with iFrame

A recent client wanted to upgrade a small portion of their legacy application with a more modern UI and extra functionality, like fuzzy text search. There are a few approaches to incremental upgrades of legacy applications. Some are non-starters, such as wrapping the application in a single project that matches the new technology you plan to use, e.g., Webpack, VueCLI or CreateReactApp.

What other options do we have? Remember iFrames? That thing we were all supposed to forget about and never use again? Our case is the perfect use case. Dropping in additional functionality into legacy applications. The problem that still needs to be solved is, how can these applications communicate with each other?

The browser API has a window method called postMessage, which allows applications to create message events that can be caught by any child of the window environment. We can use this to pass JSON objects between the main window and the iFrame.

The example I will show here, is one that dynamically creates an iFramed app, uses postMessage to provide context data, waits for a postMessage event after some work is performed, then destroys the iFrame.

<html>

<head>
  <style>
  #popup {
    position: fixed;
    top: 50px%;
    left: 15%;
    min-width: 1024px;
    min-height: 768px;
    width: 70%;
    height: 70%;
    background-color: white;
    z-index: 10;
  }
  .show {
    display: block;
    -webkit-animation: fade-in .3s ease-out;
    -moz-animation: fade-in .3s ease-out;
  }
  .hide {
    display: none;
  }
  #popup iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  #popupdarkbg {
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color:
    rgba(0,0,0,.75);
  }
  @-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  </style>
  <script type="text/javascript">
  function sendiFrameData() {
    try {
      let message = {
        type: 'mainAppMessage',
        payload: {}
      };
      let frame = document.getElementById('popupiframe');
      frame.contentWindow.postMessage(message, '*');
    } catch (e) {
      console.log(e) // eslint-disable-line no-console
    }
  }
  function openiFrame() {
    console.log('---Opening IFrame---') // eslint-disable-line no-console
    document.getElementById("popup").classList.remove("hide");
    document.getElementById("popupdarkbg").classList.remove("hide");
    document.getElementById("popup").classList.add("show");
    document.getElementById("popupdarkbg").classList.add("show");
    document.getElementById('popupiframe').src = "http://iframeAppURL:8080";
  }
  function closeiFrame() {
    console.log('---Closing IFrame---') // eslint-disable-line no-console
    document.getElementById("popup").classList.remove("show");
    document.getElementById("popupdarkbg").classList.remove("show");
    document.getElementById("popup").classList.add("hide");
    document.getElementById("popupdarkbg").classList.add("hide");
  }

  window.onload = function() {
    document.getElementById("link").onclick = function(e) {
      e.preventDefault();
      openiFrame();
      document.getElementById('popupdarkbg').onclick = function() {
        closeiFrame();
      };

      window.addEventListener('message', function(event) {
        if (event.data.type === 'iframeAppMessage') {
          console.log('<<< Got a Message from iFrame <<<') // eslint-disable-line no-console
          console.log(event.data.payload)
          closeiFrame();
        }
      });

      return false;
    }
  };
  </script>
</head>

<body>

  <div id="main">
    <h1>Hi I am Main App</h1>
    <button id="link">Click me to open iframe app</button><br>
  </div>

  <div id="popup" class="hide">
    <iframe id="popupiframe" onload="sendiFrameData()"></iframe>
  </div>
  <div id="popupdarkbg" class="hide"></div>

</body>

</html>

Below is code in the iFrame, written in VueJS, showing how to catch the message from the main app, and communicate back with postMessage.

<script>
export default {
  name: 'Home',
  data() {
    return {
      crmContext: null
    }
  },
  created() {
    window.addEventListener('message', (event) => {
      const { data } = event
      const { type, payload } = data
      if (type === 'mainAppMessage') {
        console.log('>>> Got a Message from Main App >>>', {data}) // eslint-disable-line no-console
        this.crmContext = event
      }
    })
  },
  methods: {
    done() {
      const message = {
        type: 'iframeAppMessage',
        payload: {}
      }
      if (this.crmContext && this.crmContext.source) {
        this.crmContext.source.postMessage(message, '*')
      } else {
        console.log('Could not post message', {message}) // eslint-disable-line no-console
      }
    }
  }
}
</script>

Using this these methods, the integration and communication is a seamless user experience, and allows developers to incrementally add drop-in functionality without overhauling the legacy app.

Seamlessly Integrating Micro Apps with iFrame

About the Author

Corey Webster

Sr. Consultant

Leave a Reply Cancel reply