iframe异步加载实现点击左边菜单加载右边内容实例讲解
关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面。
话不多说,做了一个实例大致是这样的:
1、首先在你的项目中建立三个文件如:
2、在Default页面引入jquery文件并在body中加入也下代码:
代码如下:
<div style="width: 20%; float: left">
<div id="butten" style="cursor: pointer;">
局部刷新(框架加载页面)
</div>
<div id="hidden" style="display: none">
我是隐藏的,点击局部刷新之后<br />
我就显示,页面加载我不会消失
</div>
</div>
<div id="page" style="width: 80%; float: right;">
<iframe src='1.htm' frameborder='0' style='border: 0; width: 100%; height: 99.4%;'>
</iframe>
</div>
<script type="text/javascript">
$(function () {
$("#butten").click(function () {
$("#hidden").show();
$("iframe").attr("src", "2.htm");
});
});
</script>
3、在1.htm和2.htm中随便写上什么都行,甚至可以直接这样写(什么html、title、body、title等均可不用写):
1.htm:
代码如下:
页面一<br />
原始页面
页面二<br />
框架加载的页面
4、效果如图:
相关推荐
-
基于JQuery实现滚动到页面底端时自动加载更多信息
关键代码: 复制代码 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false;
-
asp.net点击 查看更多 实现无刷新加载的实现代码
页面页面的js代码如下, 复制代码 代码如下: <script type="text/javascript"> $(function () { function init(count, start) { $.ajax({ type: "GET", dataType: "json", url: "Handler/Handler.ashx", data: { action: "GetMoreNews"
-
jQuery+PHP+ajax实现微博加载更多内容列表功能
在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作
-
php+ajax+jquery实现点击加载更多内容
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录
-
iframe异步加载实现点击左边菜单加载右边内容实例讲解
关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面. 话不多说,做了一个实例大致是这样的: 1.首先在你的项目中建立三个文件如: 2.在Default页面引入jquery文件并在body中加入也下代码: 复制代码 代码如下: <div style="width: 20%; float: left"> <div id="butten" style="cursor:
-
Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能
目录 1.本章目标 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 2.2 接下来,监听跳转的路由链接,实现点击二级菜单列表时,在Main 区域展示不同的内容组件 2.3 各组件代码 1.本章目标 1.1 点击不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式),默认是false Menu 菜单 | El
-
基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订单管理 标签下的 产品列表.订单列表 时,右侧内容会相应的刷新为产品列表页(productList.jsp).订单列表页(recordList.jsp)的内容 这样就使用Ajax+div实现了左边菜单选择,右边内容显示的效果,下面就来看看具体的实现过程吧 一: 整个演示用的示例程序包含默认页面(in
-
ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
ASP.NET中iframe框架点击左边页面链接,右边则显示链接页面内容,具体实现内容如下 先看看效果图: 首先是主页面main.aspx <body style="background-color: #AFEEEE"> <form id="form1" runat="server"> <div> <center> <h1> 后台管理界面 </h1> <span sty
-
iframe 异步加载技术及性能分析
这是一篇原创翻译文章.原文地址. 我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为他可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog里面有阐述:Using Iframes Sparingly: iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面.一般都是想让onload时间越早触发越好,一方面是用户体验过更重要
-
php+jquery+html实现点击不刷新加载更多的实例代码
基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参
-
jquery zTree异步加载简单实例讲解
本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM
-
php表单文件iframe异步上传实例讲解
本文实例为大家分享了php表单文件iframe异步上传的具体代码,供大家参考,具体内容如下 1.表单中放置iframe元素: 2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件,并且将表单的target设置为iframe,让iframe去提交到服务器进行文件上传: 3.img_upload_process.php中处理文件上传成功后,将上传成功保存的文件路径回传给表单中隐藏域: 4.点击表单提交按钮的时,JS设置表单act
-
使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)
在项目中用ajax异步获取数据后有时会因为数据问题或者网络问题,页面一直显示空白,现在用加载图片来过渡这种状态: <script> $(function(){ $.ajax({ url:'',//提供接口的文件地址链接 dataType:'json', type:'POST', beforeSend: function(){ $('#loading').html("<img src=\"images/loading.gif\" width=\"15
-
网页加载时页面显示进度条加载完成之后显示网页内容
现在网上有很多网页加载进度条 ,但大多都是时间固定的. 下面的当查询大量数据时,网页加载较慢,在网页加载时,显示进度条,当网页加载完成时,进度条消失,显示网页已经加载完成的内容. 复制代码 代码如下: <html> <script language=VBScript> Dim Bar, SP Bar = 0 SP = 100 Function Window_onLoad() Bar = 95 SP = 10 End Function Function Count() if Bar
随机推荐
- Perl中的符号 ->;、=>; 和 :: 分别表示什么意思?
- AngularJS 的$timeout服务示例代码
- AngularJS基础 ng-keydown 指令简单示例
- js实现的常用的左侧导航效果
- ASP.NET Core程序发布到Linux生产环境详解
- php 购物车完整实现代码
- php中array_multisort对多维数组排序的方法
- 正则表达式中不区分大小写的写法
- javascript实现验证IP地址等相关信息代码
- js继承call()和apply()方法总结
- JavaScript打开客户端exe文件的代码
- jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
- Android实现软件列表的点击启动另外一个程序功能【附demo源码下载】
- iOS移动端(H5)alert/confirm提示信息去除网址(URL)
- Express进阶之log4js实用入门指南
- 关于Vue的路由权限管理的示例代码
- 详解ES7 Decorator 入门解析
- Vue基础学习之项目整合及优化
- C#管道式编程的介绍与实现
- java将一个目录下的所有文件复制n次