javascript 无法得到键盘事件在鳄梨酱iframe

4xrmg8kj 于 2023-04-04 发布在 Java

关注(0)|答案(3)|浏览(121)

我们正在使用iframe在浏览器中使用guacamole（http://guac-dev.org/）流式传输我们的vnc服务器。我们无法在vnc画布上获取键盘事件。尽管一旦我们点击guacamole画布外的div，焦点就会进入所需部分，并且正确捕获按键事件。
我们已经在www.example.com上部署了该应用程序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>

JavaScript

来源：https://stackoverflow.com/questions/20127752/unable-to-get-keyboard-events-in-guacamole-iframe

3条答案

按热度按时间

0dxa2lsx1#

这个问题可以通过调用下面的函数来解决。

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

每次用户点击iframe.和window.focus（）时，他点击主窗口将焦点转移到它。

赞(0）回复(0）举报 2023-04-04

bxjv4tth2#

我们正在使用JOOMLA Package 器模块中的iframe设置。
对文本焦点的修复是让 Package 器模块：
1.定义一个额外的javascript函数setFocus（）
1.在参数中包含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>

赞(0）回复(0）举报 2023-04-04

6kkfgxo03#

TL;DR

<body onkeydown="myframe.contentWindow.focus()">

基于@raju的回答，但没有jQuery。简短，现代的香草。免责声明：这是我能让它工作的唯一方法。下面详细说明。

<!DOCTYPE html>

<body onkeydown="myframe.contentWindow.focus()">

<iframe id=myframe src="/guac" contextmenu="return false" style="
  position: absolute;  top: 0px;  left: 0px;
  border: none;  outline: none;
  height: 100%;  width: 100%;
  user-select: none;
"></iframe>

**这里的魔术是body标签。**技巧是在 body元素 * 上使用 keydown事件 * tripping [yourFrameID].contentWindow.focus（） 以将焦点返回到iFrame内的Guac页面。

对我来说，唯一有效的方法是每次加载页面时从DevTools控制台运行[id].windowContent.onFocus（）。
我尝试了许多不同的方法--iFrame本身，其他事件，许多变体。
如果有人能展示另一种（简单明了）的工作方式，我很想看看。
无论如何，代码的其余部分构成了一个简单但完整的实现。
--这是一个现代化的Guacamole Package 器所需要的，它的大小完全适合浏览器窗口，将键盘输入到Guac客户端，如果用户触发了选择，也不会做任何奇怪的事情。你可以使用右键单击，而不会被浏览器劫持上下文菜单。

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 无法得到键盘事件在鳄梨酱iframe

3条答案

相关问题

热门标签

最新问答