javascript - 嵌入式 booking.com 无法正常显示

Question

我正在尝试将 booking.com 嵌入式小部件添加到项目中。在对主页的第一个请求上它工作正常，您可以看到用于订购的 map 和预订小部件。但是，当您切换 View (不离开页面或关闭选项卡)并按返回返回主页面时，它变成一个链接并且嵌入的 map 小部件不显示。加载主页后，我可以看到预订请求并返回一个 JS 脚本。在这个脚本之后，调用了很多脚本/html，比如谷歌地图，但它只发生在主页上一次，其他时候仍然看到脚本被调用，但没有其他的。

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 等 Angular 钩子(Hook)。它应该像本例中的那样 https://stackblitz.com/edit/angular-8564pe?file=src%2Fapp%2Fapp.component.html但它只显示预订链接。

Answer 1

我不得不亲自看看，预订的小部件脚本似乎与 Angular 的生命周期没有很好的配合。在组件被销毁并重新初始化后，您的 <ins>标签不会与脚本一起评估。我可以想到两种方法来解决这个问题，

1- 防止组件被破坏。为此，您可以使用 RouteReuseStrategy。理论上，以这种方式呈现的 iframe 应该持续存在。

2- 这是最简单的解决方案。只需使用呈现的 <iframe>而不是 <ins> .如果您希望初始日期、经期等是动态的，您需要做的就是相应地创建 www.booking.com/flexiproduct.html 调用的查询参数并将其绑定(bind)到 iframe 的 src。

    <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>

您需要使用 sanitizer 将其标记为安全。

@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 的来源。不建议对不受信任的来源绕过清理。