angular项目怎么给iframe动态赋值

2023-12-13 05:39:06

前段时间在做项目的时候,给项目嵌入了一个第三方的ai链接,之前写成一个死的链接,测试都正常,但是后期迭代的时候将链接后面动态添加了一个参数,发现iframe不出来,并且查看dom结构,直接src对应的属性都没了,经过一顿研究发现原因是因为angular会会自帮我们清除和转义不受信任的值。

通过使用DomSanitizer可以解决此问题,

import { Component, OnInit } from '@angular/core';
import { NzModalService } from "ng-zorro-antd/modal";
import {LocalStorage} from "../../../utils/localstorage";
import {DomSanitizer} from "@angular/platform-browser";

@Component({
  selector: 'app-ai001',
  templateUrl: './ai001.component.html',
  styleUrls: ['./ai001.component.styl']
})
export class Ai001Component implements OnInit {
  


  info: any={
  }
  iframeUrl;
  constructor(private modal: NzModalService,private sanitizer:DomSanitizer) {
  }
  
  ngOnInit(): void {
    this.iframeUrl = this.getUrl();
  }
  // src
  getUrl() { 
    this.info = LocalStorage.getInfoObject();
    return this.sanitizer.bypassSecurityTrustResourceUrl(`***?shareId=${this.info.shareId}`);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(`/share?scene=${id}`);
  }
  


}
<iframe
  allow="fullscreen;microphone"
  title="FastGPT Chat Window"
  id="fastgpt-chatbot-window"
  [src]="iframeUrl"
  style="
    border: none;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2147483647;
    overflow: hidden;
  "
></iframe>

文章来源:https://blog.csdn.net/alice9999999/article/details/134846853
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。