Loading of iframes occurs only after receiving the content sent through the postMessage function

Question

Loading of iframes occurs only after receiving the content sent through the postMessage function

I have a scenario where an iframe is used to receive information through the contentWindow.postMessage function in order to log in to a page that I am creating. However, I am facing an issue where the page loads before the contentWindow.postMessage message is received. How can I ensure that the page loads only after the domain has received the necessary information?

Below is the code snippet:

Page containing the iframe:

<template>
    <iframe
        id="iframe" 
        name="iframe" 
        src="http://localhost:8081/login" 
        frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"
        >
        ></iframe>
</template>

<script>
let show = true;
export default {
    
  name: 'appFrame',
    
    function(){ document.getElementById('iframe').contentWindow.postMessage({
      userData: { 
        info1: localStorage.info1,
        info2: localStorage.info2,
        info3: localStorage.info3
        }}, 
      'http://localhost:8081/list');
      },
  data () {
    return {
      //
    }
  }
}
</script>

<style scoped>

</style>

Here is the window.onmessage code snippet on the page where I want to load the information:

window.onmessage = function(event)
{
  if(event.origin == 'http://localhost:8080')
  
  document.getElementById('output').innerHTML = event.data;
  localStorage.setItem("info1", event.data.userData.info1);
  localStorage.setItem("info2", event.data.userData.info2);
  localStorage.setItem("info3", event.data.userData.info3);

  console.log("LOCALSTORAGE: ", localStorage.getItem("info1"), localStorage.getItem("info2"), localStorage.getItem("info3") )

};

What would be the best approach to address this issue?

javascript vue.js iframe

Answer 1

Answer №1

Suppose your second application (accessible at http://localhost:8081) is a Vue.js application. The code you would need is as follows:

window.addEventListener('message', function(event) {
  if (event.origin == 'http://localhost:8080') {
    document.getElementById('output').innerHTML = event.data;
    localStorage.setItem("info1", event.data.userData.info1);
    localStorage.setItem("info2", event.data.userData.info2);
    localStorage.setItem("info3", event.data.userData.info3);

    console.log("LOCALSTORAGE: ", localStorage.getItem("info1"), localStorage.getItem("info2"), localStorage.getItem("info3") )
  }
});

In a standard Vue.js application, the root instance must be created. The initial code typically looks like this:

const rootInstance = {
  data() {
    return { /* Declare reactive properties */ };
  },

  methods: {
    attemptAfterLogin() {
      // do something here.
    }
  }

  template: `<div>Hello App</div>`
};

const app = new Vue(rootInstance);

The objective is to integrate this initialization code into the message event handler. When merged into a single code, it would appear like this:

const rootInstance = {
  data() {
    return { /* Reactive properties */ };
  },

  methods: {
    attemptAfterLogin() {
      // do something here.
    }
  }

  template: `<div>Hello App</div>`
};

// Initialize Vue.js app
const app = new Vue(rootInstance);

window.addEventListener('message', function(event) {
  if (event.origin == 'http://localhost:8080') {
    document.getElementById('output').innerHTML = event.data;
    localStorage.setItem("info1", event.data.userData.info1);
    localStorage.setItem("info2", event.data.userData.info2);
    localStorage.setItem("info3", event.data.userData.info3);

    // Mount the application
    app.$mount(document.querySelector("#app"));

    // Notify the Vue.js app that localStorage is now set.
    app.attemptAfterLogin();
  }
});

This is just one approach. Additionally, you can have a simple loader animation until your inner iframe receives the message.

By the way, it's recommended to use addEventListener instead of onmessage when listening for events.

In essence, regardless of the front-end framework, the aim is to have a single entry point/function to load your application.

Answer 2

Suppose your second application (accessible at http://localhost:8081) is a Vue.js application. The code you would need is as follows:

window.addEventListener('message', function(event) {
  if (event.origin == 'http://localhost:8080') {
    document.getElementById('output').innerHTML = event.data;
    localStorage.setItem("info1", event.data.userData.info1);
    localStorage.setItem("info2", event.data.userData.info2);
    localStorage.setItem("info3", event.data.userData.info3);

    console.log("LOCALSTORAGE: ", localStorage.getItem("info1"), localStorage.getItem("info2"), localStorage.getItem("info3") )
  }
});

In a standard Vue.js application, the root instance must be created. The initial code typically looks like this:

const rootInstance = {
  data() {
    return { /* Declare reactive properties */ };
  },

  methods: {
    attemptAfterLogin() {
      // do something here.
    }
  }

  template: `<div>Hello App</div>`
};

const app = new Vue(rootInstance);

The objective is to integrate this initialization code into the message event handler. When merged into a single code, it would appear like this:

const rootInstance = {
  data() {
    return { /* Reactive properties */ };
  },

  methods: {
    attemptAfterLogin() {
      // do something here.
    }
  }

  template: `<div>Hello App</div>`
};

// Initialize Vue.js app
const app = new Vue(rootInstance);

window.addEventListener('message', function(event) {
  if (event.origin == 'http://localhost:8080') {
    document.getElementById('output').innerHTML = event.data;
    localStorage.setItem("info1", event.data.userData.info1);
    localStorage.setItem("info2", event.data.userData.info2);
    localStorage.setItem("info3", event.data.userData.info3);

    // Mount the application
    app.$mount(document.querySelector("#app"));

    // Notify the Vue.js app that localStorage is now set.
    app.attemptAfterLogin();
  }
});

This is just one approach. Additionally, you can have a simple loader animation until your inner iframe receives the message.

By the way, it's recommended to use addEventListener instead of onmessage when listening for events.

In essence, regardless of the front-end framework, the aim is to have a single entry point/function to load your application.

Loading of iframes occurs only after receiving the content sent through the postMessage function

Answer №1

Similar questions

Troubleshooting issue: Displaying input based on selected option not functioning

What steps should be taken in VUEjs if the API response is null?

Telerik Nested perspective

Eliminate specific content from within a div tag

Building XML using PHP with relatively extensive information stored in JavaScript

Unable to display "xyz" using console.log() function upon button click

- Challenges with internal systems

Trouble with selecting inputs within a Div Element

Create-react-app unable to activate Service Worker

What is the best location to insert the code for toggling the text on a button?

Utilizing various layouts in ASP.NET MVC with AngularJS

Primary tag badge using Bootstrap design

What is the process for implementing pagination in vue-tables-2 with a Laravel REST API?

Display the information in the second dropdown menu once the selection has been made in the first dropdown menu

Outputting an object using console.log in Node.js

Unable to render data in HTML page using Vue component

Issue observed: React Map layer is not loading until mouseEnter event happens

"What is the best way to retrieve the value of a div element with jquery

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

Integration of Angular.js functionalities within a Node.js application