Angular使用iframe加載外部網(wǎng)站

項目中,需要使用iframe來加載一個外部網(wǎng)頁,但src被Angular的默認(rèn)安全策略所禁止,無法加載網(wǎng)頁。

在Angular中,可以使用iframe用來加載一個外部鏈接地址,但是src需要使用@angular/platform-browser中的DomSanitizer模塊中的sanitizer.bypassSecurityTrustResourceUrl(url)方法來特殊處理,因為Angular中有默認(rèn)的安全規(guī)則會阻止鏈接的加載。

一個例子:

<!--這樣無法正常加載網(wǎng)頁,被安全策略禁止-->
<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';                         //運(yùn)行模式 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 = '';                   //如果已經(jīng)登錄,存放token,請和localstorage.get('token')同步
    public loginUser: UserInterface;             //如果已經(jīng)登錄,存放登錄用戶信息,請和本地存儲保持同步
    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;
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容