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

【问题标题】：How can I communicate with html file hosted in iFrame that runs inside Flex App?如何与在 Flex App 中运行的 iFrame 中托管的 html 文件进行通信？
【发布时间】：2015-07-27 14:54:27
【问题描述】：

问题：需要将发生事件的通知从 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 中的函数，我该怎么做呢？

图中需要做什么：

谢谢

【问题讨论】：

使用 ExternalInterface.call 是一种方法。

标签： javascript html apache-flex

【解决方案1】：

回答我自己的问题（终于想通了，希望对某人有所帮助）：

定义要动态注入的函数

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);" +

                "}" +

            "}";

...

注册这些函数并使用 ExternalInterface 将它们从 Flex App 动态注入到 main.html

Viewer.mxml

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

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);
}

【讨论】：

【解决方案2】：

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

【讨论】：