页面中有多个iframe的加载问题

当页面包含4个iframe且直接通过src属性设置URL时,遇到刷新后加载异常的情况,表现为InternalServerError。为了解决这个问题,采用了分步加载iframe的策略:首先将所有iframe的src设为空,然后在body的onload事件中逐个加载iframe,每个iframe加载完成后触发下一个iframe的加载。这种方法确保了iframe按顺序加载,避免了同时加载导致的错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题现象:

我的页面中有4个iframe,开始我是将url直接放在每个iframe的src中,但这样会有一个问题,每次页面刷新后,那4个iframe加载出现异常,有时成功,有时失败(错误提示如下),要刷新好几次才能将所有iframe的内容显示出来

 

Internal Server Error

The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

 

解决方案:

1、先将 iframe 的src 设置为空

2、然后通过调用 loadiframe() ,每次在一个iframe的 onload() 执行完后,再加载下一个iframe

<body onload="loadiframe()">
<div>
    <div class="div-inline">
        <iframe id="TopFrame" name="top111" scrolling="auto" frameborder="0" src=""
                style="width:100%;height:100%;"></iframe>
    </div>
    <div class="div-inline">
        <iframe id="TopFrame2" name="top1112" scrolling="auto" frameborder="0" src=""
                style="width:100%;height:100%;"></iframe>
    </div>
        <div class="div-inline">
        <iframe id="TopFrame3" name="top113" scrolling="auto" frameborder="0" src=""
                style="width:100%;height:100%;"></iframe>
    </div>
    <div class="div-inline">
        <iframe id="TopFrame4" name="top1114" scrolling="auto" frameborder="0" src=""
                style="width:100%;height:100%;"></iframe>
    </div>
</div>
<script>
    function loadiframe() {
        var iframe = document.getElementById("TopFrame");
        iframe.src = "/KanbanItem1";
        iframe.onload = function(){
            iframe = document.getElementById("TopFrame2");
            iframe.src = "/KanbanItem2";
            iframe.onload = function(){
                iframe = document.getElementById("TopFrame3");
                iframe.src = "/KanbanItem3";
                iframe.onload = function(){
                    iframe = document.getElementById("TopFrame4");
                    iframe.src = "/KanbanItem4";
                };
            };
        };
    }
</script>
</body>

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值