Summary:
Incorporating a BioDigital HumanAPI anatomical model into my Angular 5 application using an iFrame. The initialization of the API object is as follows:
this.human = new HumanAPI(iFrameSrc);
An important API function human.on(...) registers click events within the iFrame, such as selecting objects from the model. To ensure continuous event monitoring, I need to determine where this function should be placed. Initially, placing it within the ngOnInit() method proved effective. However, when switching the iFrame source to display a different model, this functionality ceased. Seeking advice on how and where to maintain constant event listening capability.
Detailed Explanation:
The development context involves creating an Angular application integrated with the BioDigital HumanAPI. The core concept revolves around rendering various anatomical models offered by HumanAPI through a web application utilizing an iFrame (refer to an example here). The src attribute of the iFrame typically points to a link resembling:
https://human.biodigital.com/widget?m=congestive_heart_failure
To enable users to view multiple models, the application maintains a list of these URLs. Upon user selection, the src value of the iFrame is updated using a function called
updateFrameSrc</code containing the following code:</p>
<pre><code>iframeSrc: SafeUrl;
this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(newUrl);
Subsequently, in order to facilitate manipulation and registration of distinct click events and interactions within the iFrame itself, a HumanAPI object is instantiated as shown below:
this.human = new HumanAPI(iFrameID);
This instantiation grants access to API listener functions like human.on('scene.picked') for capturing and storing click events. All components appear to be functioning adequately.
The issue arises due to initializing the human object and defining the human.on('scene.picked') function within the ngOnInit() method. After altering the iFrame source, registering click events proves problematic. As initialization occurs only once during component inception, the potential continuity of the human.on logic may be compromised upon updating the iFrame source. Various attempts at relocating the logic throughout the lifecycle hooks have proven ineffective.
Current Approach: Implementing a temporary solution involves re-executing the ngOnInit() method subsequent to modifying the iFrame source. Although this remedy yields results, it likely deviates from standard lifecycle management practices.
Key Questions:
- Is it considered appropriate to re-invoke the
ngOnInit()method within component logic? - If not, what is the recommended placement for a JavaScript API function responsible for consistently monitoring click events within an
iFrame, even after its source has been changed?