Question

我有一个包含4个iframe的页面，并且所有页面都添加了相同的javascript。加载页面后，我发现从服务器加载了5次相同的javascript。然后，当在父页面中加载javascript时，我设置了所有iframe加载，但是得到相同的结果，为什么？

父页面的代码：

<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>

所有iframe页面中的代码：

<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>

图片： DevTool的网络：

Answer 1

iframe具有不同的上下文。它就像一个单独的浏览器选项卡或窗口。所以我认为这很正常。

iframe加载在父页面中加载的javascript，不要从磁盘缓存中加载

1 个答案: