当我单击 iframe 时，JavaScript 和 Angular 10 KeyCode 事件不起作用

Question

我正在使用 angular 10 中的 java 脚本库实现 power bi 嵌入报告，这没有问题，它工作得很好，但我的问题是我有一个 navbar，当我点击 navbar 下的图标时，navbar 会消失up 表示slideup，当我从键盘按下Esc 键时，它会再次出现在之前的位置表示slidedown 当我单击组件中的任何位置时它工作正常，然后该代码工作正常但是当我单击iframe 时来自 powerbi embed 报告它不工作不知道我有很多研究但没有找到解决方案但我尝试过 id 、 class 和 function 、eventlistner 但不工作.

注意

iframe 生成自 microsoft 不是我在我的组件中编写的。

这是我点击slideup navbar图标时的代码

HTML

<div class="nav-container" id="UniqueNavbarId">
  <nav id='navbar'>
    <div class="link-container" (click)="hiddNav()">
          <img src="assets/nav-logo/full screen.svg" style="height: 20px; 
          width: 20px;">
    </div> 
  </nav>
 </div>

TS

hiddNav() {
    $('#UniqueNavbarId').slideUp();
    $('.container-fluid').css('margin-top', '0px');
}

下面是与 hostlistner 的 keyup 代码

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
    if (evt.keyCode === 27 || evt.key === "Escape") {
      $('.nav-container').slideDown();
    } else {
    }
}

当我查看控制台检查元素时

<iframe src="https://app.powerbi.com/reportEmbed?reportId=Myid&amp;groupId=mygrop&amp;w=1&amp;config=dssass&amp;uid=1f1xc" scrolling="no" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>

我已经从 npm 包和一些外部 js 安装了所有的 keycode 库，但没有工作。

我的期望是：

当我点击 iframe 中的任何位置时，如果不可能，我的外部代码应该可以工作，那么请给我解决方案我能做什么

Answer 1

我认为您不能更改或将您的代码放入 iframe，因为 iframe 从 microsoft 生成，这意味着如果您更改为 cross origin 就像其他域一样您的同一个域，然后您可以使用 javascript 或 jquery 将代码放入 iframe。

所以我给你的建议是，当你点击图标时，用[hidden] 制作一个div，然后你的navbar 上升，然后div 将可见，当你将鼠标悬停在它上面时，再制作一个@987654328 @ 表示十字图标。

我用普通的 HTML、CSS 和 Jquery 举个例子

<div class="container" [hidden]="ShowonHover" id="ShowonHover"></div>

<div class="cancelicon" id="showIconAfterHover" (click)="ShowTopNavbar()">
    <i class="fas fa-times" style="font-size: 24px; cursor: pointer;"></i>
</div> 

CSS

.cancelicon{
    display:none;
    min-width: 52px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 56px;
    padding: 16px;
    position: fixed;
    z-index: 22;
    left: 51%;
    top: 30px;
    font-size: 17px;
    height: 53px;
    transform: translate(-50px, -13px);
    cursor: pointer;
    -webkit-animation: fadeinShow 0.5s, fadeoutShow 1.9s 2.5s;
    animation: fadeinShow 0.5s, fadeoutShow 1.9s 2.5s;
} 

 .container{
    background-color: transparent;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 62px;
    width: 500px;
    z-index: 99999;
}

 @-webkit-keyframes fadeinShow {
    from {top: 0; opacity: 0;} 
    to {top: 30px; opacity: 1;}
}
  
@keyframes fadeinShow {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}
  
@-webkit-keyframes fadeoutShow {
    from {top: 30px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}
  
@keyframes fadeoutShow {
    from {top: 30px; opacity: 1;}
    to {top: 0; opacity: 0;}
} 

TS

 ngAfterViewInit(){
    $("#ShowonHover").hover(function () {
      $("#showIconAfterHover").stop(true, true).delay(300).show(0);
    }, function () {
      $("#showIconAfterHover").stop(true, true).delay(3000).hide(0);
    });
  }

第一次这将true 喜欢ShowonHover: boolean = true;

之后，当您的navbar 上升时，将其设为false，例如this.ShowonHover = false;

---

使用 CSS 的不同方式

.cancelicon{
    visibility: hidden;
    min-width: 42px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 56px;
    padding: 16px;
    position: fixed;
    z-index: 22;
    left: 51%;
    top: 30px;
    font-size: 17px;
    height: 40px;
    transform: translate(-50px, -0px);
    cursor: pointer;
} 

 .container{
    background-color: transparent;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 62px;
    width: 500px;
    z-index: 99999;
}

.container:hover + .cancelicon{
  visibility: visible;
  -webkit-animation: fadeinShow 0.5s, fadeoutShow 1.9s 2.5s;
    animation: fadeinShow 0.5s, fadeoutShow 1.9s 2.5s;
}

 @-webkit-keyframes fadeinShow {
    from {top: 0; opacity: 0;} 
    to {top: 30px; opacity: 1;}
}
  
@keyframes fadeinShow {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}
  
@-webkit-keyframes fadeoutShow {
    from {top: 30px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}
  
@keyframes fadeoutShow {
    from {top: 30px; opacity: 1;}
    to {top: 0; opacity: 0;}
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<div class="container" id="ShowonHover"></div>

<div class="cancelicon" id="showIconAfterHover" (click)="ShowTopNavbar()">
    <i class="fas fa-times" style="font-size: 34px; cursor: pointer;"></i>
</div> 

当您将鼠标悬停在顶部中间屏幕上时，您将看到输出

我的建议是使用 Jquery，因为 CSS hover 会给你一些问题