时间戳

首页 > 解决方案 > iframe 在 Angular 5 中不起作用，它显示的是 html 内容

angular - iframe 在 Angular 5 中不起作用，它显示的是 html 内容

问题描述

这是显示的内容，我正在尝试在我的网站上显示 youtube 内容，但没有显示

这里是在浏览器上显示的 html

<iframe width="480" height="270" src="https://www.youtube.com/embed/HK6B2da3DPA?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

我使用以下内容绑定该值：

<div class="text-center"> {{articleDatils.raw_content_path}} </div>

标签： angulariframeangular5

解决方案

在 iframe 中使用 URL 之前，您需要对其进行清理。之所以需要这样做，是因为它有助于防止跨站点脚本，即它可以防止攻击者将恶意客户端脚本注入网页，这通常被称为跨站点脚本或 XSS。

这种方法对我有用：

导入这个头文件：

import { DomSanitizer } from '@angular/platform-browser';

我创建了一个函数：

getUrl(post)
{
  return this.sanitizer.bypassSecurityTrustResourceUrl('https://'+ post.url +'/');
}

然后在模板中：

<div  class="iframe-container d-none d-lg-block">
   <iframe [src]='getUrl(post)'>
      <p>Your browser does not support iframes.</p>
   </iframe> 
</div>

推荐阅读