angular中如何綁定iframe中src的方法
更新時(shí)間：2019年02月01日 09:47:21 作者：YellRes
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
需求: 頁(yè)面中有一個(gè)網(wǎng)頁(yè)組件(由iframe編寫)，此iframe顯示在一個(gè)輸入框中，當(dāng)修改輸入框中地址的時(shí)候，要求改變網(wǎng)頁(yè)組件中的內(nèi)容
網(wǎng)頁(yè)組件中的代碼(html的部分)
<iframe #Iframe [src]="testUrl" frameborder="0" width="100%" height="100%"> </iframe>
網(wǎng)頁(yè)組件中的代碼(ts的部分)
...省略
export class DesignWebInputComponent implements OnInit{
testUrl ;
}
此時(shí)問(wèn)題出現(xiàn)了，頁(yè)面無(wú)法顯示內(nèi)容
不要慌，有辦法可以解決
constructor( private sanitizer:DomSanitizer) {}
導(dǎo)入DomSanitizer 這個(gè)類 并使用其中的bypassSecurityTrustResourceUrl() 轉(zhuǎn)換url的格式 如下
trustUrl(url: string) {
if(url){
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
html中
<iframe #Iframe [src]="trustUrl(testUrl)" frameborder="0" width="100%" height="100%"> </iframe>
在這里寫了個(gè)trustUrl()轉(zhuǎn)換 testUrl 這樣就可以顯示了
總結(jié): 使用 DomSanitizer 類中的 bypassSecurityTrustResourceUrl() 來(lái)轉(zhuǎn)換url
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表
這篇文章主要介紹了angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解
下面小編就為大家?guī)?lái)一篇關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化的相關(guān)內(nèi)容，文中通過(guò)示例代碼詳細(xì)介紹了將銀行卡號(hào)和日期的方法，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
這篇文章主要為大家詳細(xì)介紹了angular2倒計(jì)時(shí)組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法
這篇文章主要給大家介紹了關(guān)于angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
我們知道在應(yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這篇文章主要介紹了AngularJS 防止頁(yè)面閃爍的方法,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了angular.bind使用心得，以及個(gè)人對(duì)于angular.bind的理解，這里分享給大家，希望大家能夠喜歡。2015-10-10
本文主要介紹AngularJS 事件,這里整理了相關(guān)資料,比較詳細(xì)的介紹了AngularJS的使用方法,有需要的小伙伴參考下2016-07-07
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯(cuò)，具有一定得參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了Angular2 (RC4) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09