My webpage has 4 iframes, all loading the same javascript file. However, when I checked the network tab in my browser's developer tools, I noticed that the javascript was being loaded 5 times from the server. I tried to set the iframes to load only after the javascript in the parent page had loaded, but I still encountered the same issue. Why is this happening?
The code of the parent page:
<html> <head> </head> <body> <iframe></iframe> <iframe></iframe> <iframe></iframe> <iframe></iframe> </body> <script> var newScript = document.createElement("script"); newScript.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"; var srcs = ["html1.html", "html2.html", "html3.html", "html4.html"]; document.getElementsByTagName("HEAD").item(0).appendChild(newScript); newScript.onload = newScript.onreadystatechange = function () { console.log("jquery.min.js loaded"); var iframes = document.getElementsByTagName("iframe"); for (var i = 0; i < iframes.length; i++) { var id = i; iframes[id].src = srcs[id]; } } console.log("init"); </script> </html>The code within all iframe pages:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> html1 </body> </html>Screenshot: Network tab in DevTool: