Встроенный booking.com не отображается должным образом - PullRequest
Новая
       14

Встроенный booking.com не отображается должным образом

2 голосов
/ 30 июня 2019

Я пытаюсь добавить встроенный виджет booking.com в проект. По первому запросу на главной странице все работает нормально, вы можете увидеть карту и виджет бронирования для оформления заказа. Однако, когда вы переключаете представление (не покидая страницу или закрывающую вкладку) и нажимаете назад, чтобы вернуться на главную страницу, оно становится ссылкой, а встроенный виджет карты не отображается. После загрузки главной страницы я вижу запросы на бронирование, и он возвращает скрипт JS. После этого сценария было вызвано много сценариев / html, таких как карты Google, но это происходит только на главной странице и один раз, в другой раз вызывается сценарий «все еще видят», но больше ничего не делают. 

import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
    selector: 'jhi-booking-frame',
    templateUrl: './booking-frame.component.html',
    styles: []
})
export class BookingFrameComponent implements OnInit {
    name = 'Angular';

    constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document: Document) {}

    ngOnInit(): void {
        const s = this._renderer2.createElement('script');
        s.type = 'text/javascript';
        s.async = false;
        s.src = '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js' + '?v=' + +new Date();
        const elementsByTagNameElement = this._document.getElementsByTagName('head')[0];
        this._renderer2.appendChild(elementsByTagNameElement.parentElement, s);
    }
}

<ins class="bookingaff" data-aid="0000" data-target_aid="0000" data-prod="map" data-width="100%" data-height="590" data-lang="ualng" data-dest_id="0" data-dest_type="landmark" data-latitude="35.6894875" data-longitude="139.6917064" data-mwhsb="0" data-checkin="2019-05-20" data-checkout="2019-05-21">
    <!-- Anything inside will go away once widget is loaded. -->
        <a href="//www.booking.com?aid=0000">Booking.com</a>
</ins>

Я уже пробовал угловые зацепки, такие как afterInitView, onInit и т. Д. Он должен оставаться таким же, как в этом примере https://stackblitz.com/edit/angular-8564pe?file=src%2Fapp%2Fapp.component.html, но на нем только показывают ссылку на бронирование. enter image description here

1 Ответ

1 голос
/ 30 июня 2019

Я должен был увидеть это сам, похоже, сценарий виджета бронирования не очень хорошо справляется с жизненным циклом angular. После уничтожения и повторной инициализации компонента ваш тег <ins> не оценивается вместе со сценарием. Я могу придумать два варианта решения этой проблемы,

1- Предотвращение разрушения компонента. Вы можете использовать RouteReuseStrategy для этой цели. Теоретически таким образом визуализированный iframe должен сохраняться.

2- Это самое простое решение. Просто используйте обработанный <iframe> вместо <ins>. Если вы хотите, чтобы начальная дата, longtitute и т. Д. Были динамическими, все, что вам нужно сделать, - это соответственно создать параметры запроса вызова www.booking.com/flexiproduct.html и привязать его к источнику iframe. 

    <iframe src="//www.booking.com/flexiproduct.html?product=map&amp;w=100%25&amp;h=590&amp;lang=tr-TR&amp;aid=0000&amp;target_aid=0000&amp;ss_id=0&amp;ss_type=landmark&amp;checkin=2019-05-20&amp;checkout=2019-05-21&amp;fid=1561904636317&amp;latitude=35.6894875&amp;longitude=139.6917064&amp;mwhsb=0&amp;" 
scrolling="no" 
style="order:none;padding:0;margin:0;overflow:hidden;width:100%;height:590" marginheight="0" marginwidth="0" allowtransparency="true" id="booking_widget__0000__1561904636317"
data-responsive="true" width="100%" height="590" frameborder="0"></iframe>

Вы должны пометить его как безопасное с дезинфицирующим средством. 

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

Использование: 

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

https://www.linkedin.com/pulse/working-iframe-angular-thiago-adriano/

Дополнительная информация независимо от источника, вам следует быть осторожным с источниками iframe. Обход санитарии не рекомендуется для ненадежных источников.

...