如何与在Flex App中运行的iFrame中托管的html文件进行通信?

时间:2015-07-27 14:54:27

标签: javascript html flex

问题:需要将已发生事件的通知从iFrame中托管的外部pivot.html发送到Flex应用以进行事件处理。

我在main.html中托管了一个Flex应用。我还有在flex应用程序内的iFrame中显示的pivot.html。由于安全域名,我只能从main.html发送回调给Flex应用程序。问题是我需要处理我在Flex应用程序中的pivot.html内的组件上收到的事件。所以我需要从pivot.html调用main.html,而main.html将依次调用Flex应用程序中的函数。

但如果我无法从pivot.html调用main.html中的函数,我怎么能这样做呢?

需要在pic中做些什么:

enter image description here

由于

2 个答案:

答案 0 :(得分:1)

回答我自己的问题(最后想出来,希望它能帮到某人):

  1. 定义要动态注入的函数

    <强> Injecter.as

  2. ...

        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. 注册这些功能并使用ExternalInterface
    2. 将它们从Flex App动态注入main.html

      <强> Viewer.mxml

      ...
      ExternalInterface.call(Injecter.getIFrameWindow);
      ExternalInterface.call("setObjectID", IFrame.applicationId, iFrame.getIFrameId());
      ExternalInterface.addCallback("currentPageChange", currentPageChange);
      ...
      
      1. pivot.html 调度事件以获取在Flex App中调用的currentPageChange函数

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

答案 1 :(得分:0)

我认为你可以使用postmessage communication。试试这个https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage