在我的网站上嵌入Flash对象是否会成为Javascript关键事件的问题？_Javascript_Flash_Keyboard

在我的网站上嵌入Flash对象是否会成为Javascript关键事件的问题？

javascript flash keyboard

在我的网站上嵌入Flash对象是否会成为Javascript关键事件的问题？,javascript,flash,keyboard,Javascript,Flash,Keyboard,可能重复：我正在制作一个支持热键的web应用程序，但该应用程序以justin.tv流嵌入的形式大量使用flash。我担心，一旦用户按play、stop或以任何其他方式聚焦flash字段，就会在到达Javascript之前吃掉所有后续的关键事件。我很担心，因为我知道YouTube flash字段会这样做；一旦它被聚焦，我就不能用CTRL+W或CTRL+Tab关闭浏览器窗口进入另一个选项卡这是YouTube flash播放器独有的吗？如果没有，我是否可以在Javascript方面做些什么来确保

可能重复：

我正在制作一个支持热键的web应用程序，但该应用程序以justin.tv流嵌入的形式大量使用flash。我担心，一旦用户按play、stop或以任何其他方式聚焦flash字段，就会在到达Javascript之前吃掉所有后续的关键事件。我很担心，因为我知道YouTube flash字段会这样做；一旦它被聚焦，我就不能用CTRL+W或CTRL+Tab关闭浏览器窗口进入另一个选项卡

这是YouTube flash播放器独有的吗？如果没有，我是否可以在Javascript方面做些什么来确保焦点仍然集中在我的应用程序上，从而允许热键正常工作

如能提供有关Javascript关键事件和浏览器插件主题的任何其他信息，将不胜感激

PS：我知道我可以通过一个不可见的div覆盖来完全拒绝访问Flash字段，但我希望允许任何用户播放/停止并控制嵌入流的音量。

除非通过用户交互激活Flash，否则它不会接收关键事件。但是，一旦发生这种情况，它就不会将密钥事件重新传输到DOM。不幸的是，即使您可以捕获JavaScript中的所有键，但通常您也无法在选择时通知Flash。Flash也不会通过制表符接收焦点，但一旦获得焦点，就不会将其传输回页面。在Flash中，只有一些特定的组合键是听不到的（因为它们是由浏览器处理的），例如Ctrl+O

但是，如果您可以控制在Flash中执行的代码（至少，您必须能够将外部SWF加载到您自己的SWF中），那么您可以向它和从它传递击键。我不太清楚那些禁忌。我认为这取决于浏览器以及它是否允许JavaScript调用

focus（）

这里有一个示例，它仅用于鼠标右键单击，但与其他按键/鼠标事件类似。

此解决方案仅在Windows上的Firefox上进行过测试。

主要问题似乎是从闪存中删除键盘焦点。已将焦点设置为Flash

经过一番尝试，我发现使用jQuery（最新版本），您可以将焦点指向表单的文本框，它将控制来自Flash的键盘输入。解决方案遵循以下过程：

Flash中的
```
ExternalInterface
```
向javascript发送命令
Javascript（在本例中使用jQuery）将焦点设置为表单文本字段
Javascript从Flash中移除焦点（用于访问Flash对象）

这是AS3代码。（我是在Flash IDE中设置的，因此如果使用外部AS3文件，则必须对其进行调整）：

下面是示例HTML/Javascript代码；您需要将

swfobject.js

文件放在同一目录中。请注意，Flash元素的id是Flash IDE的默认id，文本输入的id是

text1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>testFocus</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            html, body { height:100%; background-color: #ffffff;}
            body { margin:0; padding:0; }
            #flashContent { width:100%; height:100%; }
            .focus {
                border: 10px solid #00ffff;
                background-color: #ff0000;
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="outerdiv"><form id="form1">
        <input type="text" value="hmmm" id="text1">test</input>
        </form>
        </div>
<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="768" id="testFocus" align="middle">
                <param name="movie" value="testFocus.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#0033ff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="testFocus.swf" width="1024" height="768">
                    <param name="movie" value="testFocus.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#0033ff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>

    <script language="JavaScript">

         $(document).ready(function() {

            // just for kicks:
            $('#text1').blur(function(){
                $(this).removeClass("focus");
            });

            // handles form's text input focus (referenced by element's id):
            $('#text1').focus(function() {
                //alert('Handler for .focus() called.');
                $(this).addClass("focus");
                removeFocusOnFlash();
            });

        });

        function removeFocusOnFlash() {

            // Find the Flash container:
            var f = $('#flashContent');

            if (f) { 
                // Hide flash:
                f.tabIndex = 0; 
                f.blur();

                f.removeClass("focus");
            }
        }

        // This is called by the Flash file:
        function sendToJavaScript(value) {

            // set focus on the form's text input field: 
            $('#text1').focus();
        }
    </script>
 </body>
</html>


测试焦点
html，正文{高度：100%；背景色：#ffffff；}
正文{margin:0；padding:0；}
#flashContent{宽度：100%；高度：100%；}
.焦点{
边框：10px实心#00ffff；
背景色：#ff0000；
}
测试
$（文档）.ready（函数（）{
//只是为了好玩：
$（'#text1'）.blur（函数（）{
$（此）.removeClass（“焦点”）；
});
//处理表单的文本输入焦点（由元素的id引用）：
$（'#text1'）。焦点（函数（）{
//警报（'调用了.focus（）的处理程序'）；
$（此）.addClass（“焦点”）；
removeFocusOnFlash（）；
});
});
函数removeFocusOnFlash（）{
//查找闪存容器：
var f=$（“#flashContent”）；
如果（f）{
//隐藏闪光：
f、 tabIndex=0；
f、 模糊（）；
f、 removeClass（“焦点”）；
}
}
//这由闪存文件调用：
函数sendToJavaScript（值）{
//在表单的文本输入字段上设置焦点：
$（'#text1'）.focus（）；
}

这类问题有些常见。试试这里的解决方案：那里的答案对我都没有多大用处。其中两个答案假设我是制作flash对象的人，而剩下的答案建议让flash字段不可见，并使用HTML前端，这显然是当flash对象用于显示视频时，你有没有研究过？这使用javascript控制视频的FLV。如果你只是想用Flash播放视频（即使它包含播放列表），那么这就行了。。。我真的不知道我是否明白你想做什么。事情是这样的：api允许您从自己的ActionScript 3代码中控制音量、暂停/恢复等。您可以在Flash中开发自己的控件。那么，你为什么要跳出Flash内容来处理按键呢？只需在AS3代码中实现它们

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>testFocus</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            html, body { height:100%; background-color: #ffffff;}
            body { margin:0; padding:0; }
            #flashContent { width:100%; height:100%; }
            .focus {
                border: 10px solid #00ffff;
                background-color: #ff0000;
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="outerdiv"><form id="form1">
        <input type="text" value="hmmm" id="text1">test</input>
        </form>
        </div>
<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="768" id="testFocus" align="middle">
                <param name="movie" value="testFocus.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#0033ff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="testFocus.swf" width="1024" height="768">
                    <param name="movie" value="testFocus.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#0033ff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>

    <script language="JavaScript">

         $(document).ready(function() {

            // just for kicks:
            $('#text1').blur(function(){
                $(this).removeClass("focus");
            });

            // handles form's text input focus (referenced by element's id):
            $('#text1').focus(function() {
                //alert('Handler for .focus() called.');
                $(this).addClass("focus");
                removeFocusOnFlash();
            });

        });

        function removeFocusOnFlash() {

            // Find the Flash container:
            var f = $('#flashContent');

            if (f) { 
                // Hide flash:
                f.tabIndex = 0; 
                f.blur();

                f.removeClass("focus");
            }
        }

        // This is called by the Flash file:
        function sendToJavaScript(value) {

            // set focus on the form's text input field: 
            $('#text1').focus();
        }
    </script>
 </body>
</html>