防止 Emscripten 编译的 JavaScript 阻止某些关键输入
Posted
技术标签:
【中文标题】防止 Emscripten 编译的 JavaScript 阻止某些关键输入【英文标题】:Prevent Emscripten compiled JavaScript from blocking certain key inputs 【发布时间】:2017-11-10 19:26:54 【问题描述】:我已经 emscripten 编译了 c++ 代码(使用 openGL),该代码在我的网页中运行(转换为 WebGL)并呈现图像。一切都很好,除了 Emscripten 编译的 javascript 在我在网页上键入 textarea
时阻止我使用“删除”“退格”“制表符”键。请注意,所有字母键和“空格”都可以正常工作。
作为参考,我在 JavaScript 代码中实例化的模块与默认模块几乎完全相同:
var Module =
preRun: [],
postRun: [],
print: (function()
var element = document.getElementById('emscriptenOutput');
if (element) element.value = ''; // clear browser cache
return function(text)
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
// These replacements are necessary if you render to raw html
//text = text.replace(/&/g, "&");
//text = text.replace(/</g, "<");
//text = text.replace(/>/g, ">");
//text = text.replace('\n', '<br>', 'g');
console.log(text);
if (element)
element.value += text + "\n";
element.scrollTop = element.scrollHeight; // focus on bottom
;
)(),
printErr: function(text)
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
if (0) // XXX disabled for safety typeof dump == 'function')
dump(text + '\n'); // fast, straight to the real console
else
console.error(text);
,
canvas: (function()
var canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
// application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", function(e) alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); , false);
return canvas;
)(),
totalDependencies: 0,
//doNotCaptureKeyboard: true,
monitorRunDependencies: function(left)
this.totalDependencies = Math.max(this.totalDependencies, left);
// Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
;
(function()
var memoryInitializer = 'renderer.js.mem';
if (typeof Module['locateFile'] === 'function')
memoryInitializer = Module['locateFile'](memoryInitializer);
else if (Module['memoryInitializerPrefixURL'])
memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
var meminitXHR = Module['memoryInitializerRequest'] = new XMLHttpRequest();
meminitXHR.open('GET', memoryInitializer, true);
meminitXHR.responseType = 'arraybuffer';
meminitXHR.send(null);
)();
var script = document.createElement('script');
script.src = "renderer.js";
document.body.appendChild(script);
当然,emscripten 编译的 JavaScript 在人眼看来是乱码,但罪魁祸首很可能就在其中。
我的猜测是 WebGL 上下文正在吃键盘事件,但我不确定。我查看了这些链接并尝试在模块元素中包含“doNotCaptureKeyboard: true”,但没有成功。
https://forum.unity.com/threads/disable-enable-keyboard-in-runtime-webgl.286557/#post-1892527 https://github.com/kripken/emscripten/issues/2668#event-154218404
有人遇到过同样的问题吗?我很茫然。
【问题讨论】:
【参考方案1】:对于那些好奇的人,我有一个解决方案,但不确定它是否是最好的。我刚刚添加了自己的事件侦听器来阻止已编译 JavaScript 代码的事件侦听器:
/* code to prevent emscripten compiled code from eating key input */
window.addEventListener('keydown', function(event)
event.stopImmediatePropagation();
, true);
window.addEventListener('keyup', function(event)
event.stopImmediatePropagation();
, true);
【讨论】:
【参考方案2】:在 emscripten src/library_glfw.js 内部(大约第 400 行,里程可能因您的版本而异)有一个非常奇怪的检查,如下所示:
// This logic comes directly from the sdl implementation. We cannot
// call preventDefault on all keydown events otherwise onKeyPress will
// not get called
if (event.keyCode === 8 /* backspace */ || event.keyCode === 9 /* tab */)
event.preventDefault();
现在,如果您注释掉那些事件将正确传播的行,我不确定他们为什么将 SDL 特殊情况放在通用代码路径中。
PS:如果他们修复了那一点,这个答案可能会过时 代码,所以如果你是从未来读它,就用它作为过去 参考。
【讨论】:
以上是关于防止 Emscripten 编译的 JavaScript 阻止某些关键输入的主要内容,如果未能解决你的问题,请参考以下文章
无法在 Vue 中加载 Emscripten 编译的 C++