javascript - 如何与在 Flex 应用程序内运行的 iFrame 中托管的 html 文件进行通信?

标签 javascript html apache-flex

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

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

但是如果我无法从pivot.html调用main.html中的函数,我该怎么办?

图中需要做什么:

enter image description here

谢谢

最佳答案

回答我自己的问题(终于弄清楚了,希望对某人有帮助):

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

    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动态注入(inject)到main.html
  • Viewer.mxml

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

    function SomeEventHandler() 
    {
           var evt = document.createEvent("CustomEvent");
           evt.initCustomEvent("pagechange", true, true, "some_data_to_be_passed_here");
           window.dispatchEvent(evt);
    }
    
  • 关于javascript - 如何与在 Flex 应用程序内运行的 iFrame 中托管的 html 文件进行通信?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31656415/

    相关文章:

    javascript - 在 javascript 中单击确定按钮之前如何不执行任何操作?

    javascript - JQuery fadeIn顺序不同元素类型的子元素

    javascript - 固定位置在 IOS 上延迟

    javascript - 即使文件存在,Angular 2 也看不到该文件(使用 Angular-cli)

    javascript - 如何最好地将 javascript 解析的 JSON 内容解析为 ruby

    javascript - jQuery - 将 CSS 应用于匹配项

    html - div 是否垂直扩展以适合其子 div?

    apache-flex - 我需要 Flex Builder 吗?

    javascript - Flex - JavaScript 适用于 bin-debug,但不适用于已部署的服务器

    flash - 在 https 中加载 swf 时出现白屏