Search code examples
javascriptoracle-adf

Cannot access javascript function in ADF InlineFrame


I have a jsff page containing af:InlineFrame.

The source of this InlineFrame is HTML file say Frame.html

This html file has a javascript function called inlineframeFunction()

I have a button added in the jsff page.

My usecase is to invoke the function inlineframeFunction on click of the button which i am not able achieve.

var doc = inlineFrame.contentDocument? 
inlineFrame.contentDocument: inlineFrame.contentWindow.document;
doc.frameFunction();

Frame.html

<script type="javascript">    
    function inlineframeFunction(){
        alert('Inline Frame Function ');
    }
  </script>

JSFF Page

<af:panelGroupLayout id="pgl1" layout="vertical">

      <af:resource type="javascript">

        function inlineFrameRegionPageFunction() {
          alert('Region Page Function');
          var inlineFrame = document.getElementById('r1:0:if2');
          var doc = inlineFrame.contentDocument? inlineFrame.contentDocument: inlineFrame.contentWindow.document;
          doc.frameFunction();
        }
      </af:resource>
    </af:panelGroupLayout>
    <af:panelGroupLayout id="pgl2" layout="vertical">
      <af:panelBox text="Inline Frame Region" id="pb2"
                   inlineStyle="background-color:Lime; border-color:Lime;">
        <f:facet name="toolbar"/>
        <af:inlineFrame id="if2" source="/Frame.html" shortDesc="InlineFrame"
                        inlineStyle="background-color:Gray;"/>
        <af:commandButton text="Inline Region Button" id="rb2"
                          actionListener="#{pageFlowScope.RegionBean.onClickInlineFrameRgnButton}"/>
      </af:panelBox>
    </af:panelGroupLayout>

Solution

  • To execute a javascript from a managed bean in adf you can use the following function (https://cedricleruth.com/how-to-execute-client-javascript-in-an-adf-java-bean-action/) :

    /*** In YOURJSF.jsf button, or other component that need to execute a javascript on action, add : ****/
    <af:commandButton text="ClickMe" id="cb1" actionListener="#{YOURSCOPE.YOURJAVABEAN.clickToExecuteJavascriptAction}"/>
    
     /*** In YOURJAVABEAN.java class add : ***/
     public void clickToExecuteJavascriptAction(ActionEvent actionEvent) {
      this.executeClientJavascript("console.log('You just clicked : " + actionEvent.getSource() + " ')");
      //Note: if you use a java string value in this function you should escape it to avoid breaking the javascript.
      //Like this : stringValue.replaceAll("[^\\p{L}\\p{Z}]", " ")
     }
    
    //You should put this function in a util java class if you want to use it in multiple bean
    public static void executeClientJavascript(String script) {
     FacesContext facesContext = FacesContext.getCurrentInstance();
     ExtendedRenderKitService service = Service.getRenderKitService(facesContext, ExtendedRenderKitService.class);
     service.addScript(facesContext, script);
    }
    

    Then in your case, refer to this question to call your iframe js function using javascript inside your action listener (Calling javascript function in iframe)

    document.getElementById("if2").contentWindow.inlineframeFunction();