Get an iframe DOM element given its URL

Question

I'm using the w3c Resource Timing API. window.performance.getEntriesByType("resource"); This gives a list of resources including iframes. However, to get hold of the resources of the embedded iframes, I need to get hold of the iframe's performance object which requires me to have the reference to its' DOM node/element.

        var myiframe2 = $("#myiframe2");
        var myiframeContentWindow = myiframe2[0].contentWindow;
        var iframeContentPerf = myiframeContentWindow.performance;

The question is, how to get hold of the iframe's node reference if all I know is the URL of the iframe, which is all I know(I will not know the iframe's id or name unlike the code sample above).

Other than iterating through the document's elements and then filtering iframes and comparing the URL of the iframe with what the Resource Timing API returned, is there a simple way to get hold of the iframe's DOM node (given the iframe's URL) ?

Answer 1

If the URL of the iframe has not changed, you can try to get it directly with CSS selectors using the exact URL:

document.querySelector('iframe[src="http://example.org"]');

If the URL will change but you have a unique part per iframe (which can identify a specific iframe):

document.querySelector('iframe[src*="example.org/some/url"]');