iframe在悬停时重新加载到其他组件，例如：工具提示

xt0899hw 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(304)

我使用了iframe标记来加载一个url，但是每次我悬停到任何其他组件（例如：工具提示或打开任何下拉列表）时，iframe数据都会重新加载。它完全刷新了iframe。
html代码： <iframe scrolling="no" style="border-width:0px; overflow: hidden;" [src]=transform(mapUri)></iframe> ts文件代码：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

export class TestComponent implements OnInit {

mapUri = "https://sub.domain.com/";

constructor(private sanitizer: DomSanitizer) {}

transform(url:any) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

JavaScript Html Angular typescript iframe

来源：https://stackoverflow.com/questions/68329411/iframe-reloads-on-hover-to-other-componets-eg-tooltip

1条答案

按热度按时间

9bfwbjaz1#

您处理iframe src清理的方式似乎执行了以下操作之一：
触发了iframe的重新加载
重新触发转换函数，因此重新加载iframe内容
每次在页面上悬停任何其他组件时。
使用管道，这种意外行为可能会被阻止，而且在清理时，我发现将功能导出到专用管道更合适，这样您就可以跨应用程序上的不同组件重用它，并防止代码重复。
下面是管道实现：

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

赞(0）回复(0）举报 2021-09-23

我来回答

iframe在悬停时重新加载到其他组件，例如：工具提示

1条答案

相关问题

热门标签

最新问答