我正在尝试将 booking.com 嵌入式小部件添加到项目中。在对主页的第一次请求时,它工作正常,您可以看到用于订购的地图和预订小部件。但是,当您切换视图(不离开页面或关闭选项卡)并按返回返回主页面时,它会变成一个链接,并且嵌入的地图小部件不会显示。加载主页后,我可以看到预订请求并返回一个 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 钩子。它应该像这个例子一样https://stackblitz.com/edit/angular-8564pe?file=src%2Fapp%2Fapp.component.html但它只显示一个预订链接。