【问题标题】:Click through iframe with flash in it点击 iframe,里面有 flash
【发布时间】:2014-09-02 15:01:10
【问题描述】:

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

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

【问题讨论】:

  • 您的意思是您希望能够单击 iframe 中 Flash 内容下方的内容(它位于某物之上)?恐怕我不明白整个问题。
  • 是的,我想在 Flash 透明区域的一部分下方单击。 Flash 位于顶部,HTML 按钮位于 Flash iframe 下方。
  • 我已经用快照更新了我的问题。因此,如果您能提供帮助,请告诉我。

标签: javascript iframe flash transparent click-through


【解决方案1】:

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

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

  • 在 Flash 中拦截点击,获取坐标并验证是否超过了黑色圆圈
  • 如果是,则在Flash中处理相应的逻辑,否则继续以下步骤
  • 通过 Flash 的外部接口将坐标传递给已在 iframe 中定义的 JavaScript 函数
  • 最后在 JavaScript 中你可以按照How to simulate a click by using x,y coordinates in JavaScript? 的方式做一些事情

【讨论】:

  • 感谢 Circlespainter 的回答。但不幸的是,这些圆圈的位置和形状是动画的。所以我不能应用这个逻辑。我在 IE 浏览器中尝试了 wmode=transparent 并且它在那里工作正常,但在 Chrome 和 Firefox 中却没有。
  • 是的,wmode=transparent 可能会很麻烦,并且会对性能产生相关影响。难道你不能通过跟踪圈子的位置来让你的 Flash 逻辑更智能吗?
【解决方案2】:

待办事项:

  1. 在 iframe 上使用 CSS 属性 pointer-events: none;
  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);
            }
        }
    }
}

Small demo : Javascript eventeater,下方有按钮数组。

【讨论】:

  • 请注意,这未经测试,但我很有信心它应该可以工作。您想在 actionscript 端模拟单击后添加线程睡眠 0.1 秒。单击黑色圆圈时仍需要添加 wasBackgroundClickedLast = false,如果单击背景则需要添加 ...=true
  • javascript 和 actionscript 之间的通信如何工作的示例:code.tutsplus.com/tutorials/…
  • 在 Flash 中托管 HTML 可能更容易,但可能不会。
  • 感谢您的回答马格斯。可能有任何不整洁的东西,比如 Flash 或 HTML 或任何与网络相关的东西。在这种情况下,我可以处理 HTML 点击,但不能处理 Flash。那么,如果 Flash 在该 iframe 下方,那么 Flash 点击的解决方案是什么?
  • 我的小演示展示了如何点击和元素。除此之外,我只能建议不要使用 iframe - 使用 div 或其他东西。
猜你喜欢
  • 1970-01-01
  • 2012-04-19
  • 2015-08-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-06
  • 2020-08-19
相关资源
最近更新 更多