在iframe刷新时显示图片 [英] show image when iframe refresh
本文介绍了在iframe刷新时显示图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个ASP页面，其中包含linkButtons和一个iframe
我想这样做，当用户单击按钮时，iframe的"src"属性会更改，然后将目标内容加载到iframe，并且在iframe加载时，
向用户显示正在加载的内容，这是我的ASP页面
Hi,
i have a asp page that contains linkButtons and one iframe
i want to do this, when user clicked on buttons, the "src" attribute of iframe change and then the content of destination loaded to iframe, and when the iframe is loading,
the loading show to user, this my asp page
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#container, #container iframe {
position: relative;
width: 800px;
height: 500px;
}
#loading {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(160, 160, 160, 0.6);
color: White;
top: 0;
right: 0;
text-align: center;
font-family: Tahoma;
}
#InnerLoading {
display: none;
color: white;
margin-top: 200px;
}
</style>
<script type="text/javascript">
$(function () {
$('a.framesLinks').click(function (){
var frame1 = document.getElementById('frame1');
var loadingDisplay = document.getElementById('loading').style;
loadingDisplay.display = 'block';
var innerLoading = document.getElementById('InnerLoading').style;
innerLoading.display = 'block';
if (frame1.onload == null) {
frame1.onload = function () {
loadingDisplay.display = 'none'
innerLoading.display = 'none'
};
if (window.attachEvent) {
frame1.attachEvent('onload', frame1.onload);
}
}
if (fram.onload != null) {
loadingDisplay.display = 'block';
innerLoading.display = 'block';
}
return true;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table align="center">
<tr>
<td>
<a class="framesLinks" href="http://www.npg.ir/net" target="frame1">ASP.NET</a>
<a class="framesLinks" href="http://www.npg.ir/soft" target="frame1">Google</a>
<a class="framesLinks" href="http://www.npg.ir" target="frame1">Yahoo</a>
<div id="container">
<iframe class="FrameFrame" id="frame1" name="frame1" src="about:blank" scrolling="auto" frameborder="1" ></iframe>
<table align="center">
<tr>
<td>
<div id="loading">
<div id="InnerLoading">
<span dir="rtl">در حال بارگزاری . . .<br />
</span>
<img src="Loading Image.gif" alt="Loading . . ." />
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
它工作正常，但是当iframe刷新/重新加载时它不起作用
因为JavaScript函数设置为linkButtons的click事件
但是我想在刷新iframe时向用户显示图像.
it''s work fine, but when the iframe refresh/reload it''s doesn''t work
because the JavaScript function is set to the click event of linkButtons
but i''m want to shown image to user when iframe are refresh.
推荐答案
(功能( ){
(' a.framesLinks').点击(功能(){ var frame1 = 文档 .getElementById(' frame1')； var loadingDisplay = 文档 .getElementById(' 正在加载').style; loadingDisplay.display = ' block'; var innerLoading = 文档 .getElementById(' InnerLoading').style; innerLoading.display = ' block'; 如果(frame1.onload == 空){ frame1.onload = 功能(){ loadingDisplay.display = ' 没有' innerLoading.display = ' 没有' }; 如果(窗口 .attachEvent){ frame1.attachEvent(' onload'，frame1.onload); } } 如果(fram.onload！= 空){ loadingDisplay.display = ' block'; innerLoading.display = ' block'; } 返回 真； }); }); < / 脚本 > < /head > < 正文 > < 表单 =" form1" runat >服务器" > < 表 =" center" < tr > < td > < a =" framesLinks" href http://www.npg.ir/net" 目标 frame1" < > < a =" framesLinks" href http://www.npg.ir/soft" 目标 frame1" < /a > < a =" framesLinks" href http://www.npg.ir" 目标 =" > Yahoo >< ; /a > < div =" 容器" < iframe =" FrameFrame" id frame1" 名称 =" frame1" src 关于:空白" 滚动 =" 框架边框 =" > < /iframe > < 表 =" center" < tr > < td > < div =" 正在加载" < div =" InnerLoading" < span =" rtl" < br / > < /span > < img =" 正在加载Image.gif" alt =" / < /div > < /div > < /td > < /tr > < /table > < /div > < /td > < /tr > < /table > < /form > < /body >
('a.framesLinks').click(function (){ var frame1 = document.getElementById('frame1'); var loadingDisplay = document.getElementById('loading').style; loadingDisplay.display = 'block'; var innerLoading = document.getElementById('InnerLoading').style; innerLoading.display = 'block'; if (frame1.onload == null) { frame1.onload = function () { loadingDisplay.display = 'none' innerLoading.display = 'none' }; if (window.attachEvent) { frame1.attachEvent('onload', frame1.onload); } } if (fram.onload != null) { loadingDisplay.display = 'block'; innerLoading.display = 'block'; } return true; }); }); </script> </head> <body> <form id="form1" runat="server"> <table align="center"> <tr> <td> <a class="framesLinks" href="http://www.npg.ir/net" target="frame1">ASP.NET</a> <a class="framesLinks" href="http://www.npg.ir/soft" target="frame1">Google</a> <a class="framesLinks" href="http://www.npg.ir" target="frame1">Yahoo</a> <div id="container"> <iframe class="FrameFrame" id="frame1" name="frame1" src="about:blank" scrolling="auto" frameborder="1" ></iframe> <table align="center"> <tr> <td> <div id="loading"> <div id="InnerLoading"> <span dir="rtl">در حال بارگزاری . . .<br /> </span> <img src="Loading Image.gif" alt="Loading . . ." /> </div> </div> </td> </tr> </table> </div> </td> </tr> </table> </form> </body>
它工作正常，但是当iframe刷新/重新加载时它不起作用
因为JavaScript函数设置为linkButtons的click事件
但是我想在刷新iframe时向用户显示图片.
it''s work fine, but when the iframe refresh/reload it''s doesn''t work
because the JavaScript function is set to the click event of linkButtons
but i''m want to shown image to user when iframe are refresh.
这篇关于在iframe刷新时显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
