Question

我正在为在Youtube上使用的Chrome进行扩展。该扩展程序在视频顶部添加了一个带文本输入的叠加层。但是，输入扩展名会触发Youtube的各种击键侦听器（例如space -> pause）。 event.stopPropagation()没有做任何事情，Angular事件回调结束时return false也没有做任何事情。

我当前的（成功原型但尚未实现）解决方案是将输入包装在iframe中，iframe会将消息传递回父窗口：

iframe.contentWindow.document.querySelector("#wrapped-input").addEventListener("input", function(){
  result.innerHTML = this.value;
});

我觉得这个解决方案有点像黑客，我希望能找到更优雅的东西。顺便说一句，我正在使用AngularJS作为应用程序，所以如果有任何Angular特定的解决方法，我也很想知道它们。想法？

修改
目前的解决方案：

<iframe id="wrapper-frame"></iframe>

...

link: {
  var input = '<input id="inner-input" />';

  var wrap = $window.document.querySelector('#wrapper-iframe').contentWindow.document;
  $scope.commentInput = wrap.querySelector('#inner-input');

  wrap.open();
  wrap.write(input);
  wrap.close();

  $scope.commentInput.addEventListener('input', function(){
    var val = this.value;
    $scope.$applyAsync(function(){
      $scope.inputContent = val;
    });
  });
}

它有效，但仍然 - iframe。 Bleh，hack。如果有人有更好的想法，我会保留这个问题。

隐藏窗口范围内侦听器的击键

0 个答案: