Я пытаюсь добавить в свое приложение медиаплеер MP3 из внешней службы с помощью iframe (для моей проблемы это веб-сайт Krakenfiles). Я хочу передать ссылку на src с помощью переменной.

Я использую SafeResourceUrl и DomSanitizer для обеспечения безопасности, что в данном случае требуется для angular.

safeSrc: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {
  this.safeSrc =  this.sanitizer.bypassSecurityTrustResourceUrl(
    'https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020');
  }

После объявления переменной я переворачиваю ее в HTML-код (внутри объявления iframe):

<iframe [src]="safeSrc" width="450" height="100" frameborder="0"></iframe>

изображение сломанного медиаплеера из сервиса krakenfiles

Как вы можете видеть выше, iframe отображается на странице, но контент не виден, а плеер ни на что не реагирует.

Я подозревал, что ошибка была в ссылке, поэтому я попытался вызвать ссылку, не передавая переменную в iframe src, и, на удивление, она сработала (приведенный ниже код работает правильно).

<iframe src="https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&amp;autoplay=false&amp;date=18-08-2020" width="450" height="100" frameborder="0"></iframe>

Я думаю, что, может быть, в Angular все еще есть ограничения, связанные с переходом к переменной.

изображение медиаплеера работает правильно

Есть ли у вас какие-либо идеи?

1
Oskar Słyk 21 Авг 2020 в 00:02

2 ответа

Лучший ответ

Вам следует заменить &amp; на &.

Angular и веб-браузер могут понимать этот знак, в то время как в коде HTML нам нужно вставить ссылку на символ для "амперсанда" (&amp;)

0
Oskarro 21 Авг 2020 в 07:46

Похоже, что исходного файла нет. Это не проблема. Когда вы переходите прямо на страницу https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&amp;autoplay=false&amp;date=18-08-2020%27, вы видите битый файл.

1
Roy 20 Авг 2020 в 21:27