+ Start a Discussion
Francesco DessìFrancesco Dessì 

Lightning Web Components - Infinite number of message events

Hi!

In a Community Page, I have a LWC with an handler for message events (I use it to intercept message from an iframe).
The problem is that the handler intercepts an infinite number of message events.

For simplicity, we can consider the following LWC:
HTML

<template>
<div>-- COMPONENT TEST --</div>
<div>-- EVENTS: {counter} --</div>
</template>

JAVASCRIPT

import {LightningElement, track, api, wire} from 'lwc';

export default class Test extends LightningElement {

    counter = 0;

    checkEvent(event) {
        console.log('--> Event: ', event.type);
        this.counter++;
    }

    checkEventBind = this.checkEvent.bind(this);

    connectedCallback() {
        console.log('--> connectedCallback');
        if (window.addEventListener) {
            window.addEventListener("message", this.checkEventBind, true);
        } else {
            window.attachEvent("onmessage", this.checkEventBind);
        }
    }

    disconnectedCallback() {
        window.removeEventListener('message', this.checkEventBind, true);
    }
}

Metadata

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <description>Test</description>
    <isExposed>true</isExposed>
    <masterLabel>Test</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
 

The error occurs when the LWC is on a Community Page with a Flexible Layout. Clicking anywhere on the page generates an infinite number of message events.

The problem seems related to the Flexible Layout because it doesn’t occur if the LWC is on a Community Page with a full-width column layout.

Another example:

  1. I add the LWC on a Community Page with a Flexible Layout and on a Community Page with a full-width column layout
  2. I first open the Page with the Flexible Layout and then the Page with a full-width column layout
  3. Now, clicking anywhere on the Page with the full-width column layout, starts the generation of an infinite number of message events.

How can I solve the problem?
Do I have to avoid Flexible Layout in my Community?