Question

我正在为一个应用程序开发一个新原型，我在开始之前进行了一些测试。我正在尝试在我的页面中创建许多iframe。我编写此代码是为了验证异步加载，但我遇到的行为并不是我所期望的。

这里是我正在使用的代码：

<html>
   <head>
   <title>test</title>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript">
      function appendNew(container, location) {
         var chart = $("<iframe>")
            .attr('src', location)
            .css('width', 150)
            .css('height', 150);

         container.append(chart);
       }

    $(function () {                               
        var urls = ["http://local.test.com?test=1",
                    ...
                    "http://local.test.com?test=20"];

        var container = $("#testDiv");

        $.each(urls, function (idx, item) {
            appendNew(container, item);
        })
    })
    </script>

    </head>
    <body>
        <div id="testDiv"></div>
    </body>
</html>

它只是一个url数组的循环，一些jQuery代码会注意为每个jQuery代码添加一个新的Iframe。所有网址都指向同一页面，它只是一个由我的本地IIS 7.5托管的简单asp.net页面，其中包含以下代码进入Page_Load：

Thread.Sleep(2000);

我期望所有的iframe都是同时加载的。我得到的结果是它们以6组（即20：6/6/6/2时）加载。有什么理由/解决方案吗？

Chrome，Firefox和IE上的行为相同。

Answer 1

您看到的问题与服务器的最大连接数有关。这是浏览器特定的数字，我认为Chrome设置为6.如果您将域更改为iframe，您应该会看到加载更改。

<html>
   <head>
   <title>test</title>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript">
      function appendNew(container, location) {
         var chart = $("<iframe>")
            .attr('src', location)
            .css('width', 150)
            .css('height', 150);

         container.append(chart);
       }

       $(function () {
           var urls = [];

           var changeDomains = true;
           for (i = 1; i <= 20; i++) {
               if (changeDomains) {
                   urls[i] = "http://local" + i + ".test.com?test=" + i;
               }
               else {
                   urls[i] = "http://local.test.com?test=" + i;
               }
           }

           var container = $("#testDiv");

           $.each(urls, function (idx, item) {
               appendNew(container, item);
           })
       })
    </script>

    </head>
    <body>
        <div id="testDiv"></div>
    </body>
</html>

异步加载多个Iframe

1 个答案: