I am trying to find a method to determine if my iframe is causing a bottleneck and switch to a different source if necessary.
Is it possible to achieve this using the Performance API?
This is what I currently have in my (Angular) Frontend:
<app-player>
<div id="my-iframe" class="flex flex-col flex-auto w-full xs:p-2">
<iframe src="source1.com" title="MyIframe" allowfullscreen="" scrolling="no" frameborder="0" allow="autoplay; fullscreen" sandbox="allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" width="100%" height="100%"></iframe>
</div>
</app-player>
My Component
ngAfterViewInit(): void{
const iframe = this.twitchPlayerContainer.nativeElement.querySelector('[title="MyIframe"]');
console.log(iframe); // --> Gets the Element
setInterval(function(){
const resources = performance.getEntries();
console.log(resources); // WORKS
const resourcesIframe = iframe.performance.getEntries();
console.log(resourcesIframe); // TypeError: Cannot read property 'getEntries' of undefined
}, 3000);
}
Is there a way to retrieve the resources of the Iframe?