Фокус не приходит на flash-объект при динамической загрузке внутри диалогового окна? - PullRequest
Новая
       6

Фокус не приходит на flash-объект при динамической загрузке внутри диалогового окна?

1 голос
/ 04 января 2012

Сегодня я сделал работу, где я должен был показать флеш-плеер в диалоговом окне.Что я смог сделать это довольно легко. Но в моем флеш-плеере есть текстовое поле, которое нужно сфокусировать после загрузки флеш-плеера внутри диалогового окна, но по умолчанию оно не фокусируется.Кто-нибудь может мне помочь решить эту проблему?

Но если мы нажмем внутри флеш-плеера, я смогу сфокусироваться, но не по умолчанию.

Я покажу вам, что я сделалдо сих пор 

<!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>

Приведенный ниже код используется для фокусировки на объекте со вспышкой 

setTimeout(setFocusToFlash(), 2000);

1 Ответ

3 голосов
/ 04 января 2012

Первый: 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, как указано ниже 

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

500 мс мне хватило, чтобы сфокусироваться. Вы можете проверить и установить нужную задержку.

...