如何将对象绑定到 iframe src

Posted 2023-03-13

【中文标题】如何将对象绑定到 iframe src

【英文标题】：How to bind object into iframe src

【发布时间】：2019-08-04 05:43:41

【问题描述】：

我已将 youtube iframe 添加到我的 html 文件中，但我希望它根据来自后端的对象显示源代码，而不是像下面那样手动编写 url。我有一个存储来自管理面板的链接的对象，它被称为 item.youtube。当我将它插入[href] 时，它可以完美运行，如下所示，但肯定不是 iframe。如何正确绑定？

这是我在模态框内的 iframe 的 html：

<div class="modal" id="myModal">
  <div class="modal-dialog">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
    <div class="modal-content">
          <iframe   src="https://www.youtube.com/embed/RnNwo8aLJJ4?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

这是我的带有标题、描述等的项目列表，包括上面提到的 [href] 完美运行的标题类：

<div class="paragraph-items" *ngFor="let section of page">

  <section class="news">


    <div class="news-items-wrapper">
      <div class="news-wrapper" *ngFor="let item of section.items">
        <div class="news-item-wrapper">
          <a class="thumb" data-toggle="modal" data-target="#myModal" href="#"
             [ngStyle]="'background-image': 'url(' + item.thumbnail + ')'">
          </a>
          <div class="info">
            <a class="title" [href]="item.youtube" target="_blank"> item.title </a>
            <div class="description" [innerHTML]="item.description"></div>
          </div>
        </div>
      </div>
    </div>

  </section>
</div>

【参考方案1】：

这里的问题是 iframe src 受到角度保护并标记为不安全。 你可以创建一个管道并使用 domsanitizer

喜欢这个

import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer from '@angular/platform-browser';

@Pipe( name: 'safe' )
export class SafePipe implements PipeTransform 
  constructor(private sanitizer: DomSanitizer) 
  transform(url) 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  
 

然后将你的管道添加到应用模块

@NgModule(
   declarations : [
     ...
     SafePipe
   ],
)

在html中你可以这样使用

<iframe   [src]="url | safe"></iframe>

你可以在这里阅读 how with angular2 rc.6 disable sanitize on embed html tag which display pdf

【讨论】：

首先，感谢您的回复。实际上，我没有投反对票，我根本做不到，因为我的声望不到 15 xD。你的解决方案是正确的。但我无法插入管道，它给了我一个错误：zone.js:192 Uncaught Error: Template parse errors: The pipe 'youtube' could not be found (" <div class="modal-content"> <iframe width="560" height="315" [ERROR ->][src]="item.youtube | youtube" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyros"):

您正在使用名为 youtube 的管道，因此请检查您的管道并将 @Pipe( name: 'safe' ) 更改为 @Pipe( name: 'youtube' )