Improve loading of a page with multiple iframes with the same source - iframe

Question

I have on page with multiple iframes.
All these iframes have the same source (within the same domain that the main page which contains them all; each iframe just shows eventually a different area of this very same source).
It does work well according to this solution that I've followed:
Multiple Iframes sending ONE request to the same SRC
I do have all my iframes loaded (each of them showing correctly its own area of this common page).
But in fact each and every iframe does make an independent request to the source. And the page is quite slow to load.
Hence my question in order to improve this process:
is there a way to load the first iframe (f1 in the example), and only then to load all the others ones with the very "same content" (that to say with the same page -even if each of them shows a different area of it but this part already works well). I didn't manage to do this with a "srcdoc".
Ifames id in the html are f1, f2, f3, and so on:
<iframe style="border: 0px none; height: 1000px; width: 1000px; margin-left: -107px; margin-top: -547px; " id="f1" scrolling="no" src="MYSOURCE.html" >
</iframe>
`
`
<iframe style="border: 0px none; height: 1000px; width: 1000px; margin-left: -107px; margin-top: -685px; " id="f3" scrolling="no" srcdoc="" src="" >
and so on...
The first function waits for the first iframe to be loaded. Then the second one try to fill up the next ones with the same source page.
FuncOL = new Array();
function StkFunc(Obj) {
FuncOL[FuncOL.length] = Obj;
}
function loadingpageinf1(){
let oldDoc = f1.contentDocument;
let timer = setInterval(() => {
if (f1.contentDocument == oldDoc) return;
f1.contentDocument.addEventListener('DOMContentLoaded', () => {
f1.contentDocument.body.prepend('Hello, world!');
});
clearInterval(timer);
}, 100);
}
StkFunc(loadingpageinf1);
function Multipleiframes(){
var frames=window.frames;
for (var i=2; i<4; i++){
var frame="f"+i;
document.getElementById(frame).srcdoc = document.getElementById(f1).srcdoc ;
}
}
StkFunc(Multipleiframes);
window.onload = function() {
for(i=0; i<FuncOL.length; i++)
{FuncOL[i]();}
}
Thanks for your help.

Answer 1

you could send an ajax/fetch request to get the html page and render the html inside each of your iframe in response. that's one way to do it.
fetch('your_page.html')
.then(function(response) {
return response.text()
})
.then(function(html) {
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
//you can iterate iframes and assign innerHTL
})
.catch(function(err) {
console.log('Failed to fetch page: ', err);
});
or you can also create blob url and assign it to iframe's src