作者：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 οnclick="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>

總結

以上是生活随笔為你收集整理的用jquery + iframe實現iframe子頁面加載完前的緩沖效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。