在 iFrame 中打开一个网页答案

【问题标题】：open a wepapage inside an iFrame在 iFrame 中打开一个网页
【发布时间】：2019-06-17 06:47:20
【问题描述】：

我正在尝试在表单提交时从不同的 Angular 应用程序打开 iFrame 内的 Angular 应用程序。该应用程序（要打开的应用程序）的 URL 包含 # 。但是 iFrame 通过删除附加在 # 之后的所有部分将页面重定向到其他 URL。例如：要打开的网址：http://localhost:8080/tempApp/dist/#/web/properties?objIndex=1234 在 iFrame 中加载的网址：http://localhost:8080/tempApp/dist/?objIndex=1234 我该怎么做？

【问题讨论】：

标签： javascript html angular

【解决方案1】：

为此你需要一个管道并使用 DomSanitizer

例如

import { MyApp, SafePipe } from './myapp.component';

@NgModule({
  declarations: [
    AppComponent,
    SafePipe
  ],

在您的应用中创建管道

import { Component, ViewEncapsulation, ViewChild, ElementRef, PipeTransform, Pipe, OnInit } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

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

@Component({
  selector: 'app-root',
  templateUrl: './myapp.component.html',
  styleUrls: ['./myapp.component.css']
})

export class MyApp {
  title = 'app';
  myiframe: string = "your_url_here"
}

在你的 html 中

<iframe width="420" height="345" [src]="myiframe | safe">
</iframe>

【讨论】：