項目中逾条,需要使用iframe來加載一個外部網頁指么,但src被Angular的默認安全策略所禁止,無法加載網頁瞎饲。
在Angular中,可以使用iframe用來加載一個外部鏈接地址百新,但是src需要使用@angular/platform-browser
中的DomSanitizer模塊
中的sanitizer.bypassSecurityTrustResourceUrl(url)
方法來特殊處理企软,因為Angular中有默認的安全規(guī)則會阻止鏈接的加載。
一個例子:
<!--這樣無法正常加載網頁饭望,被安全策略禁止-->
<iframe [src]="link" width="100%" height="100%" frameborder="0" align="center"></iframe>
<!--需要這樣使用-->
<iframe id='MainIframe' [src]="trust(link)" width="100%" height="100%" frameborder="0" align="center"></iframe>
<!--或直接處理-->
<iframe id='MainIframe' [src]="sanitizer.bypassSecurityTrustResourceUrl(link)" width="100%" height="100%" frameborder="0" align="center"></iframe>
//引入DomSanitizer模塊
import { DomSanitizer } from '@angular/platform-browser';
link:string = 'http://www.baidu.com';
constructor(private sanitizer: DomSanitizer) {
console.log('Hello IframeFull Component');
}
trust(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
測試時間:2017-04-26
使用Angular版本: 2.2.1
Angular單例
import {Injectable} from '@angular/core';
import {UserInterface} from "../interface/index";
/**
* 這是一個單例模式的config仗哨,用于共享全局變量
**/
@Injectable()
export class Config {
public mode = 'dev'; //運行模式 dev or release
// public hostURL = 'https://cnodejs.org/api/v1'; //http請求前綴
public hostURL = 'http://ionichina.com/api/v1'; //http請求前綴
// public hostURL = 'http://localhost:8100/api'; //http請求前綴
public isIonic = true;
public pageLimit = 15; //每頁多少
public DRAFTS_URL = '/data/drafts.json'; //草稿本地地址
public token: string = ''; //如果已經登錄,存放token铅辞,請和localstorage.get('token')同步
public loginUser: UserInterface; //如果已經登錄厌漂,存放登錄用戶信息,請和本地存儲保持同步
static instance: Config;
static isCreating: Boolean = false;
constructor() {
if (!Config.isCreating) {
throw new Error("You can't call new in Config Singleton instance!");
}
}
static getInstance() {
if (Config.instance == null) {
Config.isCreating = true;
Config.instance = new Config();
Config.isCreating = false;
}
return Config.instance;
}
}