2

I am building a Lightning component that loads an iframe of an internal app. I've brought the component down to its minimum valuable component and I still have the problem.

The component with the iframe:

<aura:component
        implements="flexipage:availableForAllPageTypes"
        extends="c:SimpleBase"
        description="SimpleIframeComponent">

    <iframe src="https://example.com/"
            width="100%"
            height="500px"
            frameBorder="0" />

</aura:component>

The base component:

<aura:component description="SimpleBase" extensible="true" abstract="true">
</aura:component>

So long as I do not extend SimpleBase, the iframe loads. But if I do extend SimpleBase, the iframe won't load.

There are no errors in the developer log (console). Also, watching the network in developer tools, the URL doesn't even load, so it appears the component doesn't render at all when it extends the base component.

Why won't an iframe load in a Lightning component if it extends another Lightning component?

Improve this question
2
  • did you check developer log in chrome for errors? – gNerb Dec 13 '19 at 21:29
  • Yes, there are no errors in developer log. Note, there is no custom Javascript (no controller or helper). – Swisher Sweet Dec 13 '19 at 21:39
3

You need to use {!v.body} in super component SimpleBase without which the body of sub-component will not load.

Reason: (REFERENCE)

sub component’s body is evaluated and passed to a super component to use as {!v.body} and that super component’s body is evaluated and is passed to its super component,

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.