0

I am looking for a way to check if my iframe is a bottleneck (and if so, switch to anothers source)

Is there a way to achieve this with the Performance API?

I currently have this on 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 any way to get the resources of the Iframe?

PrimuS
  • 2,505
  • 6
  • 33
  • 66

1 Answers1

0

In your case Iframe.children[0].src should give you the src of the Iframe. I believe because you are referencing parent div instead of the actual iframe you're getting unexpected results.

Raishav Hanspal
  • 111
  • 5