3

I am trying to add an iframe element to a container div:

<template>
    <div class="container" lwc:dom="manual"></div>
</template>

JavaScript:

import { LightningElement } from 'lwc';
import PP from '@salesforce/resourceUrl/penpal'

initialised = false;
iframe;
container;

async renderedCallback() {

    if (this.initialised) {
        return;
    }

    this.initialised = true;

    // load Penpal
    await loadScript(this, PP).catch(error => console.error(error));

    // get container
    this.container = this.template.querySelector('div.container');

    // create iframe
    this.iframe = document.createElement('iframe');
    this.iframe.src = 'https://x.visualforce.com/apex/page';

    // HERE: I try and add the iframe to the DOM

    // bind the iframe to Penpal
    const connection = Penpal.connectToChild({
        // The iframe to which a connection should be made
        iframe: this.iframe
    });
}

Using the appendChild method:

this.container.appendChild(this.iframe); 

I get this error:

appendChild is not a function

Using the innerHTML approach:

this.container.innerHTML = this.iframe.outerHTML; 

I get this error:

Cannot add property innerHTML, object is not extensible

I also tried adding a DOMContentLoaded event listener:

connectedCallback() {
    window.addEventListener('DOMContentLoaded', function() {
        this.container.appendChild(this.iframe);
    }.bind(this), false);
}

But the DOMContentLoaded event never fires?

Question

  1. What am I doing wrong?
  2. How can I get the iframe added to the DOM successfully?
5
  • It there a specific reason you don't have the iframe explicitly part of the template with conditional rendering around it and using tracked properties to handle its attribute values?
    – Phil W
    Jun 17, 2020 at 14:19
  • @PhilW - thanks for the quick response. I've added a little more code to my example to give more context. When I include the iframe in the template code like this <iframe src="https://x.visualforce.com/apex/page"></iframe>, I get an error from Penpal saying the iframe does not have a src set... and Penpal documentation dynamically adds the iframe ... but I am open any suggestions :-)
    – Robs
    Jun 17, 2020 at 14:24
  • 1
    OK I think I understand... you're going through the hoops to allow use of a third-party package within your LWC, hence the use of lwc:dom="manual" as per the docs... perhaps you need to push the JS into a static resource rather than embedded within the LWC component itself to avoid the LWC compiler from doing stuff to it?
    – Phil W
    Jun 17, 2020 at 14:32
  • @PhilW - I have already loaded the JS lib as a static resource, which is being used in both the LWC and Visualforce page. Code example above extended further.
    – Robs
    Jun 17, 2020 at 14:36
  • 1
    Sorry, I meant the extra bits where you create the iframe itself, outside the "penpal" library but also so it is outside the LWC component source file... it is probably unnecessary but I do know that the LWC compiler does change it component code rather significantly...
    – Phil W
    Jun 17, 2020 at 14:55

0

You must log in to answer this question.

Browse other questions tagged .