問題一、 iframe如何自適應(yīng)屏幕高度

解決思路：通過設(shè)置iframe外層父元素高度等于window高度，再相對于父元素定位iframe元素；案例如下：

第一步: 模板文件中使用iframe

// demo.component.html <div style="position: relative; " [style.height]="outHeight"><iframe [src]="srcValue" allowtransparency="true" frameborder="0" id="defaulIframePage" style="position: absolute; width: 100%; height: 100%; "></iframe> </div>

第二步: ts 中自定義iframe外層父元素的高度

// demo.component.ts import {fromEvent} from "rxjs/index";export class DemoComponent imple implements OnInit{srcValue = 'http://www.baidu.com'; outHeight = '0px';ngOnInit() {// ifram最外層高度this.outHeight = window.innerHeight + 'px';fromEvent(window, 'resize').subscribe(($event) => {this.outHeight = window.innerHeight + 'px';});} }

問題二、 安全機(jī)制設(shè)置

錯誤：

解決：

第一步：創(chuàng)建管道

import { Pipe, PipeTransform } from '@angular/core'; import {DomSanitizer} from "@angular/platform-browser";@Pipe({name: 'safe' }) export class SafePipe implements PipeTransform {constructor(private sanitizer: DomSanitizer) {}transform(value: any, args?: any): any {return this.sanitizer.bypassSecurityTrustResourceUrl(value);} }

第二步: 在demo.component.html文件中加入管道

<iframe [src]="item.url | safe" allowtransparency="true" frameborder="0" id="defaulIframePage" style="position: absolute; width: 100%; height: 100%; "></iframe>

問題三、src值為同域名不同參數(shù)時，iframe不刷新問題

解決思路：使用動態(tài)組件 - 將iframe放至動態(tài)組件中，父組件將src傳值給動態(tài)組件，并且每次傳值時動態(tài)渲染組件；

1. 父組件定義

// parent.component.html <a href= "javascript:;" (click)="loadCmp(srcArray[1])">切換iframe的src值</a> <div #dynamic></div>// parent.component.ts export class ParentComponentimplements OnInit, OnDestroy {// 動態(tài)切換的src模擬數(shù)據(jù)srcArray = ["index.html?id='11'", "index.html?id='22'"];// 動態(tài)組件@ViewChild('dynamic', { read: ViewContainerRef }) dmRoom: ViewContainerRef;currentCmp: any; // 當(dāng)前渲染組件constructor(private cfr: ComponentFactoryResolver) {}ngOnInit() {// 動態(tài)渲染組件this.loadCmp(this.srcArray[0]);}// 動態(tài)渲染組件方法loadCmp(srcValue) {const com = this.cfr.resolveComponentFactory(DynamicComponent);this.dmRoom.clear(); // 清空視圖this.currentCmp = this.dmRoom.createComponent(com);// 傳值this.currentCmp.instance.pathUrl = srcUrl;} }

2. 動態(tài)組件定義

// dynamic組件；；別忘記將DynamicComponent加入數(shù)組entryComponents中； // dynamic.component.html <iframe [src]="pathUrl | safe" allowtransparency="true" frameborder="0" id="defaulIframePage" style="position: absolute; width: 100%; height: 100%; "></iframe>// dynamic.component.ts export class DynamicComponent {pathUrl: string = ''; }

轉(zhuǎn)載于:https://www.cnblogs.com/zero-zm/p/10290529.html

總結(jié)

以上是生活随笔為你收集整理的angular6 iframe应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。