Question

我正在尝试向项目添加一个booking.com嵌入式小部件。在首次请求主页时，它工作正常，您可以看到地图和预订小部件以进行订购。但是，当您切换视图（不离开页面或关闭选项卡）并按返回以返回主页时，它变为链接，并且嵌入式地图小部件不显示。加载主页后，我可以看到预订请求，它返回一个JS脚本。在此脚本之后，调用了许多脚本/ html（如Google Maps），但仅在主页上发生过，一次，其他时候仍在调用仍然可见的脚本，但没有其他内容。

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中，但仅插入其显示预订链接。

Answer 1

我不得不亲自看过它，似乎预订的小部件脚本在angular的生命周期中表现不佳。在销毁并重新初始化组件之后，不会与脚本一起评估<ins>标记。我可以想到两种解决方案，

1-防止组件被破坏。为此，您可以使用RouteReuseStrategy。从理论上讲，渲染的iframe应该保持不变。

2-这是最简单的解决方案。只需使用渲染的<iframe>而不是<ins>。如果要使初始日期，经度等保持动态，您所需要做的就是相应地创建www.booking.com/flexiproduct.html调用的查询参数，并将其绑定到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>

您需要使用消毒剂将其标记为安全。

@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的来源保持谨慎。不建议不受信任的来源绕过消毒。

嵌入式booking.com无法正确显示

1 个答案: