在我的应用程序中,我将 youtube 视频加载到 iframe 中。 我已经清理了网址。但是当我运行应用程序时,src 属性没有加载。
下面是html:
<a [href]="data.url" target="_blank" *ngIf="data.contentTypeString=='YOUTUBE_VIDEO' && data.url != null">
<div class="embed-responsive embed-responsive-16by9">
<iframe *ngIf="data.contentTypeString=='YOUTUBE_VIDEO'"
class="embed-responsive-item"
src="{{data.url}}"></iframe>
</div>
</a>
src 只是不会加载 我试过 [src]=data.url。
下面是我用来清理 url 的方法:
public manageYoutubeUrl(url: any) {
console.log("url====" + url);
var youtubeUrl = this.sanitize.bypassSecurityTrustUrl(url.replace('watch?v=', 'embed/').replace('http://', 'https://')+"?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent");
console.log("youtubeUrl=====" + youtubeUrl);
return youtubeUrl;
}
当我检查 youtubeURL 的日志时,它是这样的:
youtubeUrl=====SafeValue must use [property]=binding: https://www.youtube.com/embed/l-103taCWOQ?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent (see http://g.co/ng/security#xss)
ERROR Error: Required a safe ResourceURL, got a URL (see http://g.co/ng/security#xss) at DomSanitizerImpl.checkNotSafeValue (
请指导。 谢谢。
最佳答案
你需要做这样的事情
TS
import { DomSanitizer } from '@angular/platform-browser';
this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url)
模板
<iframe id="frame" frameborder="0" [src]="current_url"></iframe>
评论后更新
只需做一些像 [src]="current_url"
或 [attr.src] = ""
关于angular - iframe 未在 angular4 应用程序中加载 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46320387/