Angular 2 - 在iframe上注入自定义标头 [英] Angular 2 - Inject custom headers on iframe
本文介绍了Angular 2 - 在iframe上注入自定义标头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我疯狂地尝试将请求自定义标头(例如'AUTH-TOKEN':'SomeToken123'
)注入到Angular 4上。
I'm getting crazy trying to inject request custom header (something like 'AUTH-TOKEN':'SomeToken123'
) to an on Angular 4.
我需要向iframe页面传递一些必需的自定义标头参数。
I need to pass to the iframe page some required custom header parameters.
任何人都可以帮助我吗?
Anyone can please help me?
foo.component.html
foo.component.html
<iframe [hidden]="isLoading" class="full" #iframe [src]="secureSrc" (load)="onIframeLoad()" frameborder="0" ></iframe>
component.ts
component.ts
@Component({
selector: 'app-foo',
templateUrl: './foo.component.html'
})
export class FooComponent implements OnInit {
@ViewChild('iframe') iframe: ElementRef;
public isLoading: Boolean;
public secureSrc: SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer,
private renderer: Renderer2,
private router: Router
) { }
public ngOnInit() {
this.isLoading = true;
this.secureSrc = this.getIframeURL();
}
private getIframeURL(): SafeResourceUrl {
return this.sanitizer
.bypassSecurityTrustResourceUrl('https://iframe.address');
}
public onIframeLoad(): void {
if (typeof this.iframe !== 'undefined') {
// Once iFrame Loaded
if (typeof this.token !== 'undefined') {
this.iframe
.nativeElement
.contentWindow
.postMessage({
externalCommand: 'some-action',
parameter : 'action parameter'
}, '*');
}
this.isLoading = false;
}
}
}
谢谢!
推荐答案
你可以这样做:
- 创建一个服务,它将发送http get请求以及标题,
并期望blob响应。 - 在组件中使用该服务来设置iframe的src。
- 从iframe中删除[src] =secureSrc,只留下#iframe
。
// service
import { Injectable } from '@angular/core';
import { ResponseContentType, Http, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
@Injectable()
export class UrlHelperService {
constructor(private http: Http) {
}
get(url: string): Observable<any> {
let options = new RequestOptions();
options.headers = new Headers();
options.headers.append('AUTH-TOKEN', 'SomeToken123');
options.responseType = ResponseContentType.Blob;
return new Observable((observer: Subscriber<any>) => {
let objectUrl: string = null;
this.http
.get(url, options)
.subscribe(m => {
objectUrl = URL.createObjectURL(m.blob());
observer.next(objectUrl);
});
return () => {
if (objectUrl) {
URL.revokeObjectURL(objectUrl);
objectUrl = null;
}
};
});
}
}
// component
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { UrlHelperService } from './url-helper.service';
@Component({
selector: '',
templateUrl: './my-app.component.html'
})
export class MyAppComponent implements OnInit {
@ViewChild('iframe') iframe: ElementRef;
constructor(private urlHelperService: UrlHelperService) { }
ngOnInit() {
this.urlHelperService.get('http://localhost/api/file/123')
.subscribe(blob => this.iframe.nativeElement.src = blob);
}
}
这篇关于Angular 2 - 在iframe上注入自定义标头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文