CODEWITHSUNDEEP
javascripthtmlapache-flex
YohanRoth
YohanRoth

Reputation: 3263

How can I communicate with html file hosted in iFrame that runs inside Flex App?

Problem: it is needed to send notification of an occurred event from external pivot.html hosted in iFrame to a Flex app for event handling.

I have a Flex app hosted in main.html . I also have pivot.html that is displayed in iFrame inside Flex app. Due to security domains I can send callback to Flex app ONLY from main.html . The problem is that I need to handle events that I receive on the component inside pivot.html in Flex app. So I would need to call main.html from pivot.html, and main.html will in turn call a function inside Flex app.

But how can I do it if I cannot call functions in main.html from pivot.html?

What needs to be done in pic:

enter image description here

Thanks

Upvotes: 1

Views: 170

Answers (2)

YohanRoth
YohanRoth

Reputation: 3263

Answer on my own question (finally figured this out, hopefully it will help someone):

  1. Define function to be dynamically injected

    Injecter.as

...

    public static var getIFrameWindow : String = 
        "document.insertScript = function ()" +
        "{ " +
            "getIFrameWindow = function(iFrameId){                      " +     
            "   var iframeWin;" +       
            "   var iframeRef = document.getElementById(iFrameId);" +       
            "   if (iframeRef.contentWindow) {" +       
            "       iframeWin = iframeRef.contentWindow;" +     
            "   } else if (iframeRef.contentDocument) {" +      
            "       iframeWin = iframeRef.contentDocument.window;" +        
            "   } else if (iframeRef.window) {" +       
            "       iframeWin = iframeRef.window;" +        
            "   }" +        
            "   return iframeWin;" +        
            "}"+            
        "}";    

public static var SETUP_CALLBACKS:String = 
            "document.insertScript = function ()" +
            "{ " +
                "var flexApp;" +
                "setObjectID = function(value, iFrameId){" +
                "   var iframeWin = getIFrameWindow(iFrameId);" +
                "   iframeWin.addEventListener('pagechange', function pagechange(evt) {" +
                "       var page = evt.pageNumber;              " + 
                "       flexApp.currentPageChange(page);" +
                "   },false);" +
                "   flexApp = document.getElementById(value);" +

                "}" +

            "}";

...
  1. Register these functions and inject them dynamically from Flex App to main.html using ExternalInterface

Viewer.mxml

...
ExternalInterface.call(Injecter.getIFrameWindow);
ExternalInterface.call("setObjectID", IFrame.applicationId, iFrame.getIFrameId());
ExternalInterface.addCallback("currentPageChange", currentPageChange);
...

  1. pivot.html dispatch an event to get currentPageChange function called in Flex App 

    function SomeEventHandler() 
{
       var evt = document.createEvent("CustomEvent");
       evt.initCustomEvent("pagechange", true, true, "some_data_to_be_passed_here");
       window.dispatchEvent(evt);
}

Upvotes: 1

Alex Nikulin
Alex Nikulin

Reputation: 8699

I think you can use postmessage communication.Try this https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Upvotes: 0

Related Questions