Angular使用iframe加載外部網站

項目中逾条,需要使用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;
    }
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末斟珊,一起剝皮案震驚了整個濱河市苇倡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌囤踩,老刑警劉巖旨椒,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異堵漱,居然都是意外死亡综慎,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門勤庐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來示惊,“玉大人,你說我怎么就攤上這事愉镰∶追#” “怎么了?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵丈探,是天一觀的道長录择。 經常有香客問我,道長碗降,這世上最難降的妖魔是什么隘竭? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮遗锣,結果婚禮上货裹,老公的妹妹穿的比我還像新娘。我一直安慰自己精偿,他們只是感情好弧圆,可當我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著笔咽,像睡著了一般搔预。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叶组,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天拯田,我揣著相機與錄音,去河邊找鬼甩十。 笑死船庇,一個胖子當著我的面吹牛吭产,可吹牛的內容都是我干的。 我是一名探鬼主播鸭轮,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼臣淤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窃爷?” 一聲冷哼從身側響起邑蒋,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎按厘,沒想到半個月后医吊,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡逮京,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年卿堂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片造虏。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡御吞,死狀恐怖,靈堂內的尸體忽然破棺而出漓藕,到底是詐尸還是另有隱情陶珠,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布享钞,位于F島的核電站揍诽,受9級特大地震影響,放射性物質發(fā)生泄漏栗竖。R本人自食惡果不足惜暑脆,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望狐肢。 院中可真熱鬧添吗,春花似錦、人聲如沸份名。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽僵腺。三九已至鲤孵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間辰如,已是汗流浹背普监。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凯正。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓毙玻,卻偏偏與公主長得像,于是被迫代替她去往敵國和親漆际。 傳聞我的和親對象是個殘疾皇子淆珊,可洞房花燭夜當晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內容