首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >iframe [src]="videoUrl | sanitize“-页面重新加载导致我的网站出现404 iframe

iframe [src]="videoUrl | sanitize“-页面重新加载导致我的网站出现404 iframe
EN

Stack Overflow用户
提问于 2018-06-29 04:56:41
回答 1查看 705关注 0票数 0

我正在尝试从数据库加载一个videoUrl,并将其分配给iframe attr.src以显示youtube视频。数据必须来自数据库,对于我来说,除了上传视频和显示视频之外,没有其他方法可以解决这个问题,而这是我们目前不能做的。

问题是,它每隔几秒钟就会不断刷新一次,使视频短暂闪现。

有什么办法可以避免这种情况吗?

这是我引用iframe和返回url的方法的代码。

代码语言:javascript
复制
<iframe
  class="courseVideo row col-md-12 col-sm-12 col-xs-12 text-center"
  height="300"
  id="introVideoUrl"
  [src]="getIntroVideoUrl(section.introVideoUrl)"
  frameborder="0" allow="autoplay; encrypted-media"
  allowfullscreen
  style="margin-top: 15px;">
</iframe>

getIntroVideoUrl(url) {
  return this.sanitizer.bypassSecurityTrustResourceUrl(
    "https://www.youtube.com/embed/" + url
  );
}

--根据@JeremyW的建议进行编辑--好的,所以我设法得到了@JeremyW在下面提到的内容。因此,它不再不断刷新。我不得不做一些调整,而不是这样做,我只是做了一个自定义的‘消毒剂’管道。

但我确实按照他提到的方式重新创建了它,结果与管道相同,管道只是一种我可以不断重用它的方式,而不必担心每次都要重写。

然而,我现在遇到的问题是,如果我刷新页面,有时会显示我网站的一个带框架的版本,指向页面404,而不是youtube视频。

为什么会发生这种情况,或者有人能给我指出一个可以解释它的来源吗?我找不到原因。

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2018-06-29 05:23:39

我怀疑这是因为Angular的属性绑定的工作方式。我不能很容易地找到来源来验证我的怀疑,但我认为每次Angular检查src属性的值,看看它是否发生了变化,它都会重新调用函数……导致它刷新该属性的值-导致您看到的重启。

我以前也做过类似的事情,下面是我的一些代码片段,可以帮助你。长话短说,与其从HTML调用函数,不如将[src]属性指向一个变量,然后使用TS文件中的函数来设置该变量的正确值:

HTML:

代码语言:javascript
复制
<iframe 
  *ngIf="homeVideo"
  [src]="homeVideo"
  frameborder="0"
  gesture="media"
  allow="encrypted-media"
  allowfullscreen>
</iframe>

TS:

代码语言:javascript
复制
export class HomeComponent implements OnInit {
    // Video Url
    homeVideo;

    ngOnInit() {
        // Pull updated content from Firebase
        this.getContent();
    }

    getContent() {
        this.contentService.getPageContent('homePage').then( pageContent => {
            this.homeVideo = this.sanitizer.bypassSecurityTrustResourceUrl(pageContent.homeVideo);
        }
    }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51091110

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档