angular中如何綁定iframe中src

發(fā)布時(shí)間：2021-02-08 09:30:44 來源：億速云閱讀：452 作者：小新欄目：web開發(fā)

小編給大家分享一下angular中如何綁定iframe中src，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

需求: 頁(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í)問題出現(xiàn)了，頁(yè)面無法顯示內(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() 來轉(zhuǎn)換url

看完了這篇文章，相信你對(duì)“angular中如何綁定iframe中src”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

猜你喜歡