无意的 Iframeception 和 Iframe 下面的元素不可见答案

【问题标题】：Unintentional Iframeception and elements below Iframe are not visible无意的 Iframeception 和 Iframe 下面的元素不可见
【发布时间】：2021-09-21 18:07:06
【问题描述】：

我的目标是在 Sharepoint 上嵌入一个有角度的 Web 应用程序 URL。所以我按照这个 youtube 视频https://www.youtube.com/watch?v=EXG54G7Nv8o&t=109s 中的说明创建了一个可嵌入的 iframe，我似乎遇到了一个奇怪的错误，我的 iframe 一直在自己内部创建 see here。即使没有显示 iframe，也会删除它下面的任何元素。我的项目结构与视频的相同：具有一个具有 iframe 和按钮以在单击时显示 iframe 的 home 组件和一个具有要在 iframe 上显示的信息的小部件组件。

以下是一些相关文件，其余为基本 Angular 架构：

home.component.html

<html>
    <body>
        <iframe src="iFrameUrl" ngIf="displayIFrame" style"height:80%; width:80%; z-index:20; 
        position:absolute; background: white" id="IFrameTest">

        <button (click)="onOpenIFrame()">Open IFrame</button>
    <body>
</html>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements Oninit {
    iFrameUrl!: SafeResourceUrl;
    displayIFrame = false;
    constructor(private sanitizer: DomSanitizer){
       
    }

    ngOnInit(): void {
    }

    onOpenIFrame(): void{
        this.iFrameUrl = this.sanitizer.bypassSecurityTrustResourceUrl('/widget');
        this.displayIFrame = true;
    }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WidgetComponent } from './widget/widget.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', component: HomeComponent} },
    { path: 'widget', component: WidgetComponent },
    { path: '**', redirectTo: '' }
];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

【问题讨论】：

标签： angular iframe

【解决方案1】：

答案是src字段必须有括号。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。