function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jake BullardJake Bullard 

Refresh/Reload iframe on click of button - Lightning Component

Hey guys, 

I need to refresh an iFrame on when a user clicks a button. What's the best way to do that? I tried the solution shown here, which is neat, but for my purpose that appended "time" breaks my page. The page is a part of a managed package so I can't change it. Let me know if there is another way to do this.

Here is my code currently 

Cmp
<aura:component access="global" implements="lightning:availableForFlowScreens">
    <aura:attribute name="UploadFiles" type="Boolean" default="true"/>
    <aura:attribute name="Encoded_ID" type="String" />
    <aura:attribute name="UploadWarning" type="String" />
    <aura:attribute name="time" type="String" />
    
    	<aura:if isTrue="{! v.UploadFiles }" >
                <ui:outputText class="warning" value="{!v.UploadWarning}" />
                <div class="slds-p-top_small"></div>
            	<iframe src="{!'/TVA_CFB__RequestFile?'+v.Encoded_ID + 't=' + v.time}" height="350px" 
                width="350px" frameborder="0" class="slds-p-bottom_small"/>
            <ui:button press="{!c.myAction}">Upload another file</ui:button><br/><!--Ifraim should be reloaded on the press of this button-->
            </aura:if>
</aura:component>

Controller
({
    myAction : function(component, event, helper) {

                 var d = new Date();
                 var n = d.getTime();   
				component.set("v.time", n );   
           
    }
})


 
Benjamin_MitchellBenjamin_Mitchell
You could probably try something like this...

Component:
<aura:component access="global" implements="lightning:availableForFlowScreens">
    <aura:attribute name="UploadFiles" type="Boolean" default="true"/>
    <aura:attribute name="Encoded_ID" type="String" />
    <aura:attribute name="UploadWarning" type="String" />
    <aura:attribute name="time" type="String" />
    <aura:attribute name="iframeSource" type="String"/>

    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    	<aura:if isTrue="{! v.UploadFiles }" >
                <ui:outputText class="warning" value="{!v.UploadWarning}" />
                <div class="slds-p-top_small"></div>
            	<iframe src="{!v.iframeSource}" height="350px" 
                width="350px" frameborder="0" class="slds-p-bottom_small"/>
            <ui:button press="{!c.myAction}">Upload another file</ui:button>
<!--Iframe should be reloaded on the press of this button-->
            </aura:if>
</aura:component>
Controller:
 
({
    init : function(component, event, helper) {
        helper.myAction(component, event, helper);
    }
    myAction : function(component, event, helper) {
        helper.myAction(component, event, helper);
    }
})

Helper:
 
({
    myAction : function(component, event, helper) {
        var encodedId = component.get("v.Encoded_ID");
        var d = new Date();
        var n = d.getTime();  
        var src = "/TVA_CFB__RequestFile?"+encodedId+ "t=" + n;
        component.set("v.iframeSource", src);
    }
})

This would initialize your iframe's source, and reset the iframeSource attribute (which would refresh the iframe 'component') each time the button was clicked.  If you're not using the init() function for anything else, you can even just point the aura:handler for the init event to the myAction() method in the controller, avoiding duplicate code and having to create the helper.js file.
Jake BullardJake Bullard
Hey Ben, 

Thanks for the help, I gave this a shot but it didn't work. Remeber I had to remove the section that is + "t=" + n due to the fact that it breaks the page I'm loading. So when I click the button it sets the attribute but the URL is the same so the iframe doesn't refresh. 


Component
<aura:component access="global" implements="lightning:availableForFlowScreens">
    <aura:attribute name="UploadFiles" type="Boolean" default="true"/>
    <aura:attribute name="Encoded_ID" type="String" Default="aWQ9MjAxOC0wNS0yMSAxNjozOToyOS8jYTE0MVkwMDAwMDRwNlhjUUFJ" />
    <aura:attribute name="UploadWarning" type="String" />
	<aura:attribute name="iframeSource" type="String"/>  
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    	<aura:if isTrue="{! v.UploadFiles }" >
                <ui:outputText class="warning" value="{!v.UploadWarning}" />
                <div class="slds-p-top_small"></div>
            	<iframe src="{!v.iframeSource}" height="350px" 
                width="350px" frameborder="0" class="slds-p-bottom_small"/>
            <ui:button press="{!c.myAction}">Upload another file</ui:button><br/><!--Ifraim should be reloaded on the press of this button-->
            </aura:if>
</aura:component>



Controller
({
    init : function(component, event, helper) {
        helper.myAction(component, event, helper);
    },
    myAction : function(component, event, helper) {
        helper.myAction(component, event, helper);
    }
})



Helper
({
    myAction : function(component, event, helper) {
        var encodedId = component.get("v.Encoded_ID");
        var d = new Date();
        var n = d.getTime();  
        var src = "/TVA_CFB__RequestFile?"+encodedId;
        component.set("v.iframeSource", src);
    }
})