[SalesForce] Is attribute ‘allowfullscreen’ of iframe unavailable in Lightning component

I added attribute "allowfullscreen='true'" to a iframe in my lightning component, then when the Lightning component is loaded, the attribute is strangely disappeared. I don't know why this happen and how to fix this.

Best Answer

Using the new render event in Summer 17, you can do this:

<aura:handler name="render" value="{!this}" action="{!c.doRender}"/>

<iframe src="{!v.iframeUrl}"
        class="my_iframe"
        ..../>

Render function:

doRender : function(component, event, helper) {
  var frames = document.getElementsByClassName("my_iframe");

  for (var i = 0; i < frames.length; i++) {
    var frame = frames[i];
    frame.setAttribute("allowfullscreen", "allowfullscreen");
  }
}

Prior to this, you would need to put this markup in the renderer.js file - you can't just use the init handler, as the iframe doesn't exist yet. Plus dom manipulation should be in the renderer - (not the case anymore after Summer 17)

If you do use a renderer.js file, just call this:

afterRender: function(component, helper) {
  helper.doRender(component);
  return this.superAfterRender();
},
Related Topic