My current project involves adding a booking.com embedded widget. Initially, when accessing the main page, everything works perfectly - the map and booking widget are visible for ordering. However, if you switch views without leaving the page or closing the tab, then click back to return to the main page, the embedded map widget becomes a link instead of displaying properly. Upon loading the main page, I notice requests for booking that return a JS script. Following this script, several scripts/html elements like Google Maps are called, but this only happens on the main page the first time. Subsequent visits still trigger the script calls, but nothing else appears.
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>
I have attempted to use Angular hooks like afterViewInit and onInit, but the issue persists. It should function similar to this example here, where the booking details are displayed instead of just a link to booking https://i.stack.imgur.com/ig81b.png.