需求: 頁面中有一個網(wǎng)頁組件(由iframe編寫)，此iframe顯示在一個輸入框中，當(dāng)修改輸入框中地址的時候，要求改變網(wǎng)頁組件中的內(nèi)容

網(wǎng)頁組件中的代碼(html的部分)

 <iframe  #Iframe  [src]="testUrl"  frameborder="0"  width="100%"  height="100%"> </iframe>

網(wǎng)頁組件中的代碼(ts的部分)

...省略export class DesignWebInputComponent implements OnInit{  testUrl ;}

此時問題出現(xiàn)了，頁面無法顯示內(nèi)容

不要慌，有辦法可以解決

constructor( private sanitizer:DomSanitizer) {}

導(dǎo)入DomSanitizer 這個類 并使用其中的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>

在這里寫了個trustUrl()轉(zhuǎn)換 testUrl 這樣就可以顯示了

總結(jié): 使用 DomSanitizer 類中的 bypassSecurityTrustResourceUrl() 來轉(zhuǎn)換url

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。