用jquery + iframe實現iframe子頁面加載完前的緩沖效果

作者：xyz

 

iframe:

 

<iframe name="rightFrame" id="rightFrame" style="margin:0px; WIDTH: 100%;  HEIGHT: 480px; VISIBILITY: inherit; background-color:transparent;  Z-INDEX: 3"
        scrolling="auto" allowTransparency="true" frameborder="0" src="order/myorders/init.do">
</iframe>

 

父頁面的調用：

 

<a onclick="clickDetails('<%=subM.getHref() %>');return false;" href="javascript:;" target="rightFrame"><%=subM.getText() %></a>

 

<script type="text/javascript">
    function clickDetails(strUrl){
        var loadHtml="<span style='padding-top:15px; text-align:right; color:#9b9b9b;font-size:12px;'>"+
            "<img alt='load' src='<%=request.getContextPath()%>/images/loading.gif' align='absMiddle'  bold='0'  /> 正在載入...</span>";
        $.ajax({
               type: "get",
               url: strUrl,
               data: "",
               dataType:"html",
               beforeSend:function(){
                frames['rightFrame'].document.body.innerHTML=loadHtml;
                //frames["rightFrame"].document.close();
                //frames["rightFrame"].document.write(loadHtml);  
               
               },
               success: function(msg){
                    //$("#rightFrame").Document.body.html(msg);
                    frames["rightFrame"].document.close();
                   frames["rightFrame"].document.write(msg);
                }
            });
    }
</script>