0

I'm trying to append an iframe to a nested div, but for some reason, the append doesn't work when it's an iframe.

var cmpStyle = "width: " + theWidth + "; height: " + theHeight;
$("#createInMe").append("<div id=\'vid-" + cmpID + "\' 
class=\'videoWrapper\'></div>");
$("#vid-" + cmpID).append("<div id=\'iframe-" + cmpID + "\' 
class=\'videoWrapperIframe\' style=\'" + cmpStyle + "\'></div>");
$("#iframe-" + cmpID).append("<iframe id=\'myId\' width=\'560\' height=\'315\' src=\'https://www.youtube.com/embed/IBvf7KUEZ78\' allowfullscreen=\'true\'></iframe>");

The first two divs are created as hoped for, but the iframe does not get created.

I changed it to one string and get the same result in the inspect element window.

<div id="createInMe" data-aura-rendered-by="825:0" class="cSaleFunnel" data-aura-class="cSaleFunnel">
    <div class="videoWrapper" id="vid-a1p2a0000005NKEAA2">
        <div style="width: 100%; height: undefined%" class="videoWrapperIframe" id="iframe-a1p2a0000005NKEAA2"></div>
    </div>
</div>

UPDATE: I believe this has something to do with Salesforce preventing specific types of things from being injectable into the DOM. The reason that I say that is because of the following code.

var bgImage = theResult[i].Image_URL__c;
var cmpStyle = "display: block; width: " + theWidth + "; height: " + theHeight + "; background-image: url(\'" + bgImage + "\')";
$("#createInMe").append("<div id=\'img-" + cmpID + "\' style=\'" + cmpStyle + " \'></div>");


$A.createComponent(
    "aura:HTML", {
        "tag": "div",
        "HTMLAttributes": {
            "id": cmpID,
            "style": cmpStyle
        }
    },
    function(components, status, errorMessage) {
        if (status === "SUCCESS") {
            var body = component.get("v.body");
            body.push(components);
            component.set("v.body", body);
        }
    }
);

Now, the createComponent function creates the banner image as hoped for, but the jquery append creates a div with the following style:

display: block;
width: 100%;
height: 250px;
background-image: url(;

It will not add the URL portion, and I tried writing the code in various ways. Does this mean that the only way to create my nested divs is through createComponent? And if so, how do I create my nested div with the iframe two divs deep?

  • What happens if you use append just once, with all the HTML in one big string? – sfdcfox Apr 28 '18 at 16:57
  • @sfdcfox I changed it to a single line and get the same results. I edited my question to show the output. – Logan Apr 30 '18 at 13:01
  • @sfdcfox I updated my question again, as it appears that Salesforce is preventing specific types of appending. I'd love your thoughts on this! – Logan Apr 30 '18 at 13:38
  • Okay, I changed the bundle version to 39, and the iframe will append, but the image url still doesn't work... – Logan Apr 30 '18 at 14:51
  • Okay, it looks like you've got a quoting issue. One sec. – sfdcfox Apr 30 '18 at 14:53
1

The apostrophes in the CSS are being misinterpreted. This is a case of not sufficiently escaping quotes; what is happening here is the string is being prematurely terminated, which causes the element to parse incorrectly.

For this reason, I'd recommend using $A.createComponents, which eliminates the possibility that you'll screw up something trivial like this. However, to actually fix this problem, use a template string instead:

var cmpStyle = `display: block; width: ${theWidth}; height: ${theHeight}; background-image: url('${bgImage}')`;
$("#createInMe").append(`<div id="img-${cmpID}" style="${cmpStyle}" />`);

Example code using $A.createComponents:

<aura:application >
    <div aura:id="container">

    </div>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:application>

({
    init: function(component, event, helper) {
        var cmpID = component.getGlobalId(), cmpStyle = "";
        $A.createComponents(
            [
                ["div",{ id: "vid-"+cmpID, class:"videoWrapper" }],
                ["div",{ id: "iframe-"+cmpID, class: "videoWrapperIFrame", style: cmpStyle }],
                ["iframe",{ id:"myId", width:"560", height:"315", allowfullscreen:"true",
                           src:"https://www.youtube.com/embed/IBvf7KUEZ78" }
                ]
            ],
            (components, status, error) => {
                switch(status) {
                case "DRAFT":
                case "SUCCESS":
                components[0].set("v.body", components[1]);
                components[1].set("v.body", components[2]);
                component.find("container").set("v.body", components[0]);
                break;
                case "ERROR":
                alert(error[0].message);
            }
            });
    }
})
  • The problem with the createComponents is that I am looping through a related list of records to determine what needs to be created (video, image, text), and I don't see how to use the createComponents with an iframe. I can't mix and match because I need them to output in a specific order... – Logan Apr 30 '18 at 15:02
  • I copied and pasted your cmpStyle string and get the same css results as I did with my string... – Logan Apr 30 '18 at 15:05
  • Do you have any references for nesting the iframe 2 divs deep? – Logan Apr 30 '18 at 15:07
  • @Logan I added the code I wrote up testing iframes in $A.createComponents to this answer, too. – sfdcfox Apr 30 '18 at 15:09
  • You're the best! Really appreciate it! – Logan Apr 30 '18 at 15:10

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.