Question

今天我完成了一项工作，我应该在对话框中显示一个flash播放器。我能够很容易地做到这一点。但是我的flash播放器包含一个文本框，一旦flash播放器加载到对话框中，它就需要聚焦，但默认情况下没有聚焦。有人可以帮我解决这个问题吗？

但是如果我们点击Flash播放器内部我能够获得焦点，但默认情况下不是。

我会告诉你到目前为止我做了什么

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

</html>
    <head>
        <title></title>
        <meta name="google" value="notranslate">         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen"> 
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: #ffffff; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>
        <script type="text/javascript" src="jquery-1.5.1.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.11.js"></script>
        <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>

<a class= "subskillList">test</a>
<!--<div id="activityDialog" class="nodisplay">
    <div class="popup_content">
        <div class="popup-title-header">
            <div class="">
                <span id="dialogTitle" class=""></span><a href="javascript:void(0);" id="closePlayer" title="close" class="close-button">
                    <span class="close-icon">close</span></a></div>
        </div>-->
        <div id="flashContent"></div>
    <!--</div>
</div>-->
</body>
</html>
<script type="text/Javascript">
$(document).ready(function () {
    var languageCode;
    var contentUrl;
    var flashurl;
    $('.subskillList').live('click', function (event) {
        flashEmbed();
        Dialog($('#activityDialog'));
        return false;
    });

    function flashEmbed() {
        var swfVersionStr = "10.0.0";
        var xiSwfUrlStr = "testFocusProject.swf"
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "always";
        params.allowfullscreen = "false";
        params.wmode = "opaque";
        var attributes = {};
        attributes.id = "flashApp";
        attributes.name = "testFocusProject";
        attributes.align = "middle";
        swfobject.embedSWF(
                "testFocusProject.swf", "flashContent",
                "840px", "500px",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
                $('#flashApp').tabIndex=0;
                $('#flashApp').focus();
    }

    function setFocusToFlash() {
    $('#flashApp').tabIndex=0;
    $('#flashApp').focus();
    }

    function Dialog(control) {
        $dialog = $(control).dialog({
            resizable: false,
            autoOpen: false,
            modal: true,
            draggable: true,
            open: function () {
                var overlaywidth = $('.ui-widget-overlay').width();
                $('.ui-dialog').width(840).height(540);
                var x = $(window).height() / 2 - $('.ui-dialog').height() / 2;
                var y = $(window).width() / 2 - $('.ui-dialog').width() / 2;
                $('.ui-dialog').css('left', y + 'px');
                $('.ui-dialog').css('top', x + $(window).scrollTop() + 'px');
                $('body').css("overflow", "hidden");
                $('.ui-widget-overlay').width(overlaywidth + 20);

                setTimeout(setFocusToFlash(), 2000);
            },
            close: function (ev, ui) {
                $('.ui-widget-overlay').stop().animate({ "opacity": "0" }, 1480);
                $('body').removeAttr('style');
            }
        }).dialog('open');
    }
});
</script>

以下代码用于关注flash对象

setTimeout(setFocusToFlash(), 2000);

Answer 1

首先：swfobject.embedSWF(...)需要几毫秒才能将swf嵌入HTML中。因此，您无法立即致电$('#flashApp').tabIndex=0;或$('#flashApp').focus();

第二：你确定$('#flashApp')正在返回任何内容。

第三：setTimeout(setFocusToFlash(), 2000);错了。它会立即调用该函数。正确是setTimeout(setFocusToFlash, 2000);

通过修复这三个来了解如何执行此操作。

首先声明这样的函数。这是在Firefox中有效的。

function setFocusToFlash() {
    document["flashApp"].tabIndex=0;
    document["flashApp"].focus();
}

如果它不起作用window["flashApp"].focus();应该可以在其他浏览器中使用。

并使用embedSWF中的ready回调，如下所示

 swfobject.embedSWF(
            "testFocusProject.swf", "flashContent",
            "840px", "500px",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes, function(){
                setTimeout(setFocusToFlash, 500);
        });

500ms 足以让我获得焦点。您可以测试并设置所需的延迟。

在对话框内动态加载时，焦点不会出现在Flash对象上？

1 个答案: