CODEWITHSUNDEEP
vue.jsnuxt.js
MarkPlewis
MarkPlewis

Reputation: 2410

Nuxt.js global events emitted from page inside iframe are not available to parent page

I'm trying to create a pattern library app that displays components inside iframe elements, alongside their HTML. Whenever the contents of an iframe changes, I want the page containing the iframe to respond by re-fetching the iframe's HTML and printing it to the page. Unfortunately, the page has no way of knowing when components inside its iframe change. Here's a simplified example of how things are setup:

I have an "accordion" component that emits a global event on update:

components/Accordion.vue

<template>
  <div class="accordion"></div>
</template>

<script>
  export default {
    updated() {
      console.log("accordion-updated event emitted");
      this.$root.$emit("accordion-updated");
    }
  }
</script>

I then pull that component into a page:

pages/components/accordion.vue

<template>
  <accordion/>
</template>

<script>
  import Accordion from "~/components/Accordion.vue";

  export default {
    components: { Accordion }
  }
</script>

I then display that page inside an iframe on another page:

pages/documentation/accordion.vue

<template>
  <div>
    <p>Here's a live demo of the Accordion component:</p>
    <iframe src="/components/accordion"></iframe>
  </div>
</template>

<script>
  export default {
    created() {
      this.$root.$on("accordion-updated", () => {
        console.log("accordion-updated callback executed");
      });
    },
    beforeDestroy() {
      this.$root.$off("accordion-updated");
    }
  }
</script>

When I edit the "accordion" component, the "event emitted" log appears in my browser's console, so it seems like the accordion-updated event is being emitted. Unfortunately, I never see the "callback executed" console log from the event handler in the documentation/accordion page. I've tried using both this.$root.$emit/this.$root.$on and this.$nuxt.$emit/this.$nuxt.$on and neither seem to be working.

Is it possible that each page contains a separate Vue instance, so the iframe page's this.$root object is not the same as the documentation/accordion page's this.$root object? If so, then how can I solve this problem?

Upvotes: 1

Views: 7802

Answers (1)

MarkPlewis
MarkPlewis

Reputation: 2410

It sounds like I was correct and there are indeed two separate Vue instances in my iframe page and its parent page: https://forum.vuejs.org/t/eventbus-from-iframe-to-parent/31299

So I ended up attaching a MutationObserver to the iframe, like this:

<template>
  <iframe ref="iframe" :src="src" @load="onIframeLoaded"></iframe>
</template>

<script>
  export default {
    data() {
      return { iframeObserver: null }
    },
    props: {
      src: { type: String, required: true }
    },
    methods: {
      onIframeLoaded() {
        this.getIframeContent();

        this.iframeObserver = new MutationObserver(() => {
          window.setTimeout(() => {
            this.getIframeContent();
          }, 100);
        });
        this.iframeObserver.observe(this.$refs.iframe.contentDocument, {
          attributes: true, childList: true, subtree: true
        });
      },
      getIframeContent() {
        const iframe = this.$refs.iframe;
        const html = iframe.contentDocument.querySelector("#__layout").innerHTML;
        // Print HTML to page
      }
    },
    beforeDestroy() {
      if (this.iframeObserver) {
        this.iframeObserver.disconnect();
      }
    }
  }
</script>

Attaching the observer directly to the contentDocument means that my event handler will fire when elements in the document's <head> change, in addition to the <body>. This allows me to react when Vue injects new CSS or JavaScript blocks into the <head> (via hot module replacement).

Upvotes: 1

Related Questions