利用iframe实现javascript无刷新载入整页
jquery有一个load()方法,使用方法如:$("#div").load("/index.html");这样就可以将index.html加载到ID为div的容器中,
用iframe也可以实现,但没有上述做法完美,参见discuz那些网站,如登陆弹出一个层,也是载入的一个页面,但我发现状态栏左边出现的是 正在打开about:blank,不知道是不是将iframe的src设为about:blank,然后在编辑iframe呢?但注意了,查看源代码的时候却看不到载入页面的时候是看不到载入的这个页面的源代码,不知道是不是才用了跟jquery一样分析head,然后将载入页面的头部信息添加到主页面的头部,然后用eval()函数执行javascript代码,,求解?
以下我用了一个页面做为承载载入页面源代码的容器,命名为do.html,传递一个参数uri告诉do.html要载入的页面!
示例DEMO:http://mi.8866.org:2/management.aspx/ 直接点登陆既可
该页面加载了两个js文件
<script type="text/javascript" src="/image/script.ashx/global.js?ver=1.0.0"></script>
<script type="text/javascript" src="/image/script.ashx/plus.js?ver=1.0.0"></script>
do.html的源代码为:
1 2 3 4 5 6 7 8 9 | < html > < head > < title >载入中...</ title > < script type="text/javascript" src="/image/script.ashx/do.js?ver=1.0"></ script > </ head > < body > </ body > </ html > |
File:do.js
1 2 3 4 5 6 7 | document.write( "<script src=\"/image/script.ashx/global.js?ver=1.0.0\"></script>" ); document.write( "<script src=\"/image/script.ashx/plus.js?ver=1.0.0\"></script>" ); window.onload= function (){ j.plus.loadPage({uri: "/" ,time:1},{ start: function (){ /*开始加载的回执函数*/ }, over: function (){ /*加载完成的回执函数*/ }}); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | if (! typeof (window.j))window.j= new js(); j.plus= new plus(); function plus(){} plus.prototype.loadPage= function (r,callback,e,times){ /* r 请求; r.time : 等待加载时间(毫秒); callback :回执函数 (callback.start(),callback.over()) e.element 页面容器; */ if (!r.uri)alert( 'page uri parameters not be found!' ); var aj= new ajax(); aj.request(r,{ start: function (){ if (callback.start)callback.start(); if (e)e.innerHTML= '加载中..' ; else {document.body.innerHTML= '加载中' ;}}, error: function (x){ if (e)e.innerHTML= '加载失败!' ; else document.body.innerHTML= '加载失败' ;}, success: function (x){ var func= function (){ if (callback.over)callback.over(); if (e)e.innerHTML=x; else document.write(x);}; if (r.time){ var t= new timer(r.time,func);t.start();} /*延迟显示*/ else func(); }}); } /*aj为ajax请求对象在global.js中定义 * timer为实现一个定时器的代码,在plus.js中有定义 */ |
函数已经定义完成,我们在需要加载的地方添加代码:
File:/management.aspx/
1 2 3 | var bd=j.$( "mainbody" ); // mainbody为一个div容器 var uri= "/do.html?uri=/management.aspx/" +uri; bd.innerHTML= "<iframe src='" +uri+ "' frameborder='0' width='" +(j.x()-200)+ "' height='100%' scrolling='no'></iframe>" ; |
1 | 由于 do .html会被缓存,所以在 do .js中用ajax将返回的html输出到 do .html |
示例DEMO:http://mi.8866.org:2/management.aspx/ 直接点登陆既可
附DEMO下载地址:http://mi.8866.org:2/web.aspx/
DEMO为SharpDevelop+asp.net mvc创建,如果在VS中打不开直接用SharpDevelop应该就可以了
整站完成后再发完整的............
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述