项目中,需要使用iframe来加载一个外部网页,但src被Angular的默认安全策略所禁止,无法加载网页。
在Angular中,可以使用iframe用来加载一个外部链接地址,但是src需要使用@angular/platform-browser
中的DomSanitizer模块
中的sanitizer.bypassSecurityTrustResourceUrl(url)
方法来特殊处理,因为Angular中有默认的安全规则会阻止链接的加载。
一个例子:
<!--这样无法正常加载网页,被安全策略禁止-->
<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;
}
}