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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!