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

编程问答 2022-12-06

问题描述

我正在用角度为10的Java脚本库实现Power Bi Embed报告，对此没有任何问题，但可以正常工作，但我的问题是，当我单击navbar下的图标时，我有一个navbar navbar上升表示slideup，当我从键盘上按Esc键时，它又以先前的位置再次出现，意味着slidedown当我在组件中的任意位置单击时，它的工作正常，然后代码可以正常工作，但是当我点击来自 powerbi embed 的iframe报告无效时，我不知道我有很多研究，但仍未找到解决方案，我尝试过使用{{1} }，id和class，function，但不起作用。

注意

eventlistner是从 microsoft 生成的，不是我在组件中编写的。

当我点击iframe的图标时，这是我的代码

HTML 

slideup navbar

TS 

<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>

以及下面用于通过hostlistner进行键盘锁的代码

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

当我在控制台上查看检查元素

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

我已经从npm软件包和一些外部js安装了所有密钥代码库，但是无法正常工作。

我的期望是：

当我在iframe中的任意位置单击时，我的外部代码应该无法正常工作，然后请给我解决方案

解决方法

我认为您无法更改代码或将代码放入iframe，因为iframe是从 microsoft 生成的，这意味着跨源就像其他域一样如果您要更改为同一域，则可以使用 javascript 或 jquery 将代码放入iframe。

因此，我建议您在单击图标时与div一起使用[hidden]和navbar，然后div就会升起，div就会出现，并且您将鼠标悬停然后在其上再制作一个<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> 的十字图标。

我给你的例子使用普通的HTML，CSS和Jquery 

.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;}
}

CSS 

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

TS 

true

这是第一次，ShowonHover: boolean = true;就像navbar

之后，当您的false上升时，使其像this.ShowonHover = false;一样.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; } @-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;} }

使用CSS的不同方式

<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> 
HTTP 302 redirect

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

我的建议是使用 jQuery ，因为 CSS 悬停给您带来一些问题

angular9embediframepowerbireport