我们正在使用 iframe 在浏览器中使用鳄梨酱（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>
这个问题通过调用下面的函数解决。
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>
这里的魔法是 body 标签。 技巧是在 body 元素上使用 keydown 事件跳闸 [yourFrameID].contentWindow.focus() 将焦点返回到 iFrame 内的 Guac 页面。
.windowContent.onFocus()。
我尝试了多种不同的方式——iFrame 本身、其他事件、许多变体。如果有人可以展示另一种（简单明了）有效的方法，我很乐意看到它。
--所有你需要的鳄梨调味酱的现代包装器，它将完美地调整到浏览器窗口的大小，将键盘输入到 Guac 客户端，并且如果用户以某种方式触发选择则不会做任何奇怪的事情。您可以使用右键单击，而浏览器不会劫持您的上下文菜单。
我在包含 IFrame 的组件的 ngOnInit 中调用了这个函数。
private setFocusIframe() {
const frame = document.querySelector<HTMLIFrameElement>("#myframe")
window.addEventListener("keydown", function(event: KeyboardEvent){
frame.contentWindow.focus();
})
}