JavaScript 和 Angular 10 KeyCode 事件在我点击 iframe 时不起作用

Question

我在 angular 10 中使用 java 脚本库实现 power bi 嵌入报告没有问题，它工作完美，但我的问题是我有一个 navbar 当我点击在 navbar 下的图标上然后 navbar 上升意味着 slideup 并且当我从键盘按下 Esc 键然后它再次出现之前的位置意味着 slidedown 它的工作当我点击我的组件中的任何地方时很好，然后该代码工作正常但是当我点击来自 powerbi embed 的 iframe 报告它不起作用不知道我有很多研究但还没有找到解决方案我已经尝试过 id ， class 和 function ，eventlistner 但没有工作。

备注

That iframe generate from microsoft not i have written in my component.

这是我点击 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，但无法正常工作。

我的期望是：

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

Answer 1

我认为你不能更改或将代码放入 iframe 因为 iframe 从 microsoft 生成，这意味着 cross origin 与其他域一样，如果您更改为相同的域，那么您可以使用 javascript 或 [= 将代码放入 iframe 77=].

所以我给你的建议是用 [hidden] 制作一个 div 当你点击图标时你的 navbar 会上升然后 div 会可见并且什么时候你将鼠标悬停在上面，然后再制作一个 div 作为十字图标。

我给你举的例子是正常的 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 悬停会给你一些问题

JavaScript 和 Angular 10 KeyCode 事件在我点击 iframe 时不起作用

JavaScript and Angular 10 KeyCode event not working when i click on iframe

iframe

powerbi

report

embed

angular9

不同的使用方式 CSS