4

我们正在使用 iframe 在浏览器中使用 guacamole( http://guac-dev.org/ ) 流式传输我们的 vnc 服务器。我们无法在 vnc 画布上获取键盘事件。虽然一旦我们点击鳄梨酱画布外的 div，焦点就会进入所需的部分，并且关键事件会被正确捕获。

我们已经在http://test-mate.com:8081/#/上部署了应用程序

下面是鳄梨酱渲染代码。

<body>

    <!-- Display -->
    <div class="displayOuter">
        <div class="displayMiddle">
            <div id="display">
            </div>
        </div>
    </div>

    <!-- Dimensional clone of viewport -->
    <div id="viewportClone"/>

    <!-- Notification area -->
    <div id="notificationArea"/>

    <!-- Images which should be preloaded -->
    <div id="preload">
        <img src="images/action-icons/guac-close.png"/>
        <img src="images/progress.png"/>
    </div>

    <script type="text/javascript" src="scripts/lib/blob/blob.js"></script>
    <script type="text/javascript" src="scripts/lib/filesaver/filesaver.js"></script>

    <!-- guacamole-common-js scripts -->
    <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
    <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
    <script type="text/javascript" src="guacamole-common-js/layer.js"></script>
    <script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
    <script type="text/javascript" src="guacamole-common-js/audio.js"></script>
    <script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
    <script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>

    <!-- guacamole-default-webapp scripts -->
    <script type="text/javascript" src="scripts/session.js"></script>
    <script type="text/javascript" src="scripts/history.js"></script>
    <script type="text/javascript" src="scripts/guac-ui.js"></script>
    <script type="text/javascript" src="scripts/client-ui.js"></script>

    <!-- Init -->
    <script type="text/javascript"> /* <![CDATA[ */

        // Start connect after control returns from onload (allow browser
        // to consider the page loaded).
        window.onload = function() {
            window.setTimeout(function() {

                var tunnel;

                // If WebSocket available, try to use it.
                //if (window.WebSocket)
                    //tunnel = new Guacamole.ChainedTunnel(
                        //new Guacamole.WebSocketTunnel("websocket-tunnel"),
                        //new Guacamole.HTTPTunnel("tunnel")
                    //);

                // If no WebSocket, then use HTTP.
               // else
                    tunnel = new Guacamole.HTTPTunnel("tunnel")

                // Instantiate client
                var guac = new Guacamole.Client(tunnel);

                // Add client to UI
                guac.getDisplay().className = "software-cursor";
                GuacUI.Client.display.appendChild(guac.getDisplay());

                // Tie UI to client
                GuacUI.Client.attach(guac);

                try {

                    // Calculate optimal width/height for display
                    var optimal_width = window.innerWidth;
                    var optimal_height = window.innerHeight;

                    // Scale width/height to be at least 600x600
                    if (optimal_width < 600 || optimal_height < 600) {
                        var scale = Math.max(600 / optimal_width, 600 / optimal_height);
                        optimal_width = Math.floor(optimal_width * scale);
                        optimal_height = Math.floor(optimal_height * scale);
                    }

                    // Get entire query string, and pass to connect().
                    // Normally, only the "id" parameter is required, but
                    // all parameters should be preserved and passed on for
                    // the sake of authentication.

                    var connect_string =
                        window.location.search.substring(1)
                        + "&width="  + optimal_width
                        + "&height=" + optimal_height;

                    // Add audio mimetypes to connect_string
                    GuacUI.Audio.supported.forEach(function(mimetype) {
                        connect_string += "&audio=" + encodeURIComponent(mimetype);
                    });

                    // Add video mimetypes to connect_string
                    GuacUI.Video.supported.forEach(function(mimetype) {
                        connect_string += "&video=" + encodeURIComponent(mimetype);
                    });

                    guac.connect(connect_string);

                }
                catch (e) {
                    GuacUI.Client.showError(e.message);
                }

            }, 0);
        };

    /* ]]> */ </script>

</body>
4

2 回答 2

1

通过调用以下函数解决了这个问题。

function setFocusThickboxIframe() {
    var iframe = $("#TB_iframeContent")[0];
    iframe.contentWindow.focus();
}

每次用户点击 iframe。而 window.focus() 当他单击主窗口以将焦点转移到它时。

于 2013-11-26T12:25:19.807 回答
0

我们正在使用来自 JOOMLA 包装器模块的 iframe 设置。

文本焦点的修复是拥有包装模块：

  1. 定义一个额外的 javascript 函数 setFocus()

  2. 在参数中包含 onmouseover="setFocus()"

这是 modules/mod_wrapper/tmpl/default.php 中的代码，显示了这一点：

<?php
...
defined('_JEXEC') or die;
?>
<script type="text/javascript">
        function iFrameHeight()
        {
...
        }
        function setFocus() {
          document.getElementById('blockrandom').contentWindow.focus();
        }
</script>
<iframe <?php echo $load; ?>
        id="blockrandom"
        name="<?php echo $target; ?>"
        src="<?php echo $url; ?>"
        width="<?php echo $width; ?>"
        height="<?php echo $height; ?>"
        scrolling="<?php echo $scroll; ?>"
        frameborder="<?php echo $frameborder; ?>"
        sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation"
        onmouseover="setFocus();"
        class="wrapper<?php echo $moduleclass_sfx; ?>" >
        <?php echo JText::_('MOD_WRAPPER_NO_IFRAMES'); ?>
</iframe>
于 2014-02-20T21:59:38.843 回答