无法在鳄梨酱iframe中获取键盘事件
unable to get keyboard events in guacamole iframe
我们正在使用鳄梨酱流式传输vnc服务器(http://guac-dev.org/)在浏览器中使用iframe。我们无法在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>
通过调用以下函数可以解决此问题。
function setFocusThickboxIframe() {
var iframe = $("#TB_iframeContent")[0];
iframe.contentWindow.focus();
}
每次用户点击iframe。和window.focus（），当他点击主窗口将焦点转移到它时。
我们使用来自JOOMLA包装器模块的iframe设置。
文本焦点的修复方法是使用包装器模块：
-
定义一个额外的javascript函数setFocus（）
-
在参数中包含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>
TL；博士
<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>
这里的神奇之处在于身体标签Trick使用body元素上的keydown事件触发[yourFrameID].contentWindow.focus（）将焦点返回到iFrame内的Guac页面。
对我来说，唯一的另一种方法是每次加载页面时从DevTools控制台运行[id].windowContent.onFocus（）。
我尝试了许多不同的方法——iFrame本身，其他事件，许多变体。
如果有人能展示另一种（简单明了）的工作方式，我很乐意看到。
无论如何，其余的代码形成了一个简单而完整的实现。
--Guacamole的现代包装器所需要的一切，它的大小将与浏览器窗口完美匹配，将键盘输入到Guac客户端，如果用户以某种方式触发选择，则不会做任何更糟糕的事情。您可以使用右键单击，而浏览器不会劫持您的上下文菜单。
我使用的是angular。
我在包含IFrame的组件的ngOnInit中调用了这个函数。
private setFocusIframe() {
const frame = document.querySelector<HTMLIFrameElement>("#myframe")
window.addEventListener("keydown", function(event: KeyboardEvent){
frame.contentWindow.focus();
})
}
相关文章：
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 如何在php文件中获取$.post-ajax传递的值
- 在Shopify中获取博客文章的图片
- 使用Javascript获取所选选项ID
- 在jQuery中获取表的行索引
- 使用jquery将mysql数据获取到新的表行中
- 在动态创建的元素上获取对特定选择器的引用
- 获取键盘值
- 在Windows 8 Metro模式下，在浏览器中获取虚拟键盘的高度
- 无法在鳄梨酱iframe中获取键盘事件
- 如何使用 Keydown 事件在多种语言/键盘布局中获取正确的字符
- 获取键盘焦点在文本区域或输入上的坐标
- 如何在TVJS中获取TVML textField的节点和键盘引用
- 在键盘事件中获取鼠标位置
- 如何在不接受焦点的元素上获取键盘事件
- 如果使用虚拟键盘，Jquery如何在输入字段中获取值
- 使用虚拟键盘JavaScript获取文本字段的ID
- 获取键盘(numpad)键的正确keyCode
