javascript - 点击 iframe，里面有 flash

Question

我有一个内部闪光灯和 iFrame，我想通过 iFrame 单击而不是通过闪光灯。我已经看到了，我们可以通过“pointer-events: none;”点击 iFrame 但它会传递 iframe 中的所有内容。现在我只想知道，我们可以在flash中启用或检查鼠标点击吗？

我为我的问题添加了一个示例。黑点在 Flash swf 文件中，在 iFrame 中。现在，当我单击透明区域时，在这种情况下，应该单击位于标签按钮下方的区域。否则应单击黑点。

Answer 1

我认为在这种情况下你是否在 iframe 中并不重要，如果我理解正确你想要从 Flash 到底层 HTML 页面的直通点击，但前提是点击不满足某些条件（在这种情况下，只有当它没有超过黑点时）。

一种方法是在 iframe 中的 Flash 部分和一些 JavaScript 部分之间协作完成：

• 拦截Flash中的点击，获取坐标并验证是否在黑圈上
• 如果是，则在Flash中处理相应的逻辑，否则继续以下步骤
• 通过 Flash 的外部接口将坐标传递给已在 iframe 中定义的 JavaScript 函数
• 最后，在 JavaScript 中，您可以按照如何在 JavaScript 中使用 x,y 坐标来模拟点击？

Answer 2

待办事项清单：

1. pointer-events: none;在 iframe 上使用 CSS 属性
2. 创建一个覆盖元素的ID="event-eater"的不可见div 。
3. 在下方添加 Javascript（使用 jQuery）以识别点击发生的位置
4. 它将调用 actionscript 方法 ClickPosition 并根据返回的结果执行以下操作 1
   • 如果单击黑色区域 - 什么都不做，在 actionscript 中创建单击事件
   • 如果点击背景 - 暂时隐藏当前元素，并在 javascript 中重新创建点击

Javascript

$('#event-eater').click(function(evt) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    var x = Math.abs(Math.round(evt.pageX - posX));
    var y = Math.abs(Math.round(evt.pageY - posY));
    var result = "["+x+", "+y+"]";
    if(document['flashInterface'].ClickPosition(result)=="true"){
        $('#event-eater').css({display:'none'});
        starter = document.elementFromPoint(evt.clientX, evt.clientY);
        $(starter).click();
        $('#event-eater').css({display:''});
    };
});

动作脚本

package
{
    import fl.events.ColorPickerEvent;
    import flash.display.MovieClip;
    import flash.external.ExternalInterface;
    public class Main extends MovieClip {
        //set this variable true if background was clicked last, false otherwise
        var wasBackgroundClickedLast:Boolean = new Boolean(true)
        public function Main() {
            //allows JavaScript to access the ClickPosition() function.
            ExternalInterface.addCallback("ClickPosition", clickPosition);  
        }
        public function clickPosition(value:String):String{
            var va= str.split(",");
            simulateClick(Number(va[0]),Number(va[1]));
            return wasBackgroundClicked.toString();
        }
        public function simulateClick(x:Number, y:Number):void
        {
            var objects:Array = stage.getObjectsUnderPoint(new Point(x, y));
            var target:DisplayObject;
            while(target = objects.pop()){if(target is InteractiveObject){ break; }}
            if(target !== null)
            {
                var local:Point = target.globalToLocal(new Point(x, y));
                var e:MouseEvent = new MouseEvent(
                    MouseEvent.CLICK, true, false, local.x, local.y);
                target.dispatchEvent(e);
            }
        }
    }
}

小演示：下方带有按钮数组的 Javascript eventeater。