个人中心
gpt4 book ai didi

javascript - 无法在 Guacamole iframe 中获取键盘事件

转载 作者：行者123 更新时间：2023-11-29 15:40:23 24 4
gpt4 key购买 nike

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

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

下面是 Guacamole 渲染代码。

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

最佳答案

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

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

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

关于javascript - 无法在 Guacamole iframe 中获取键盘事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20127752/

24 4 0
文章推荐： android - 从 Firebase 数据库填充 ListView
文章推荐： javascript - Grunt.js : how do I normalize files myself, Grunt 的工作方式？
文章推荐： android - GoogleApiClient 连接失败，ConnectionResult 状态码为 SIGN_IN_REQUIRED
文章推荐： android - 全局变量的值在 ValueEventListener 中初始化后被重置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com