如何解决当我单击iframe时，JavaScript和Angular 10 KeyCode事件不起作用
我正在用角度为10的Java脚本库实现Power Bi Embed报告，对此没有任何问题，但可以正常工作，但我的问题是，当我单击navbar下的图标时，我有一个navbar navbar上升表示slideup，当我从键盘上按Esc键时，它又以先前的位置再次出现，意味着slidedown当我在组件中的任意位置单击时，它的工作正常，然后代码可以正常工作，但是当我点击来自 powerbi embed 的iframe报告无效时，我不知道我有很多研究，但仍未找到解决方案，我尝试过使用{{1} }，id和class，function，但不起作用。
注意
eventlistner是从 microsoft 生成的，不是我在组件中编写的。
当我点击iframe的图标时，这是我的代码
HTML
slideup navbarTS
<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 悬停给您带来一些问题
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。