需求: 頁(yè)面中有一個(gè)網(wǎng)頁(yè)組件(由iframe編寫(xiě))，此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è)類(lèi) 并使用其中的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>

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

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com