Iframe实现局部刷新

最新推荐文章于 2019-08-14 20:06:28 发布
最新推荐文章于 2019-08-14 20:06:28 发布
阅读量84 收藏
点赞数
文章标签： xhtml c# ui
原文链接：http://www.cnblogs.com/ywblog/archive/2010/10/30/1865332.html
版权

1.IframeRefresh.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IframeRefresh.aspx.cs"
    Inherits="FunctionTest.IframeRefresh" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>

<script type="text/javascript">
function Search()
{
    var city=document.getElementById("txtCityName").value;
    if(city!="")
    {
        document.getElementById("iframe1").src="MyFrame.aspx?city="+city;
    }
}
</script>

<body>
    <form id="form1" runat="server">
    <div>
        <center>
            <table border="1">
                <tr>
                    <td colspan="2">
                        <b>Iframe实现局部刷新</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        城市名称:
                    </td>
                    <td>
                        <asp:TextBox ID="txtCityName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" name="btnQuery" value="查询" οnclick="Search()" />
                    </td>
                </tr>
                <tr>
                    <td>
                        显示区域列表
                    </td>
                    <td>
                        <iframe src="MyFrame.aspx" style="text-align: center" id="iframe1" frameborder="0"
                            scrolling="no" height="30" />
                    </td>
                </tr>
            </table>
        </center>
    </div>
    </form>
</body>
</html>

2.MyFrame.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyFrame.aspx.cs" Inherits="FunctionTest.MyFrame" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlAreaList" runat="server" Width="100">
        </asp:DropDownLis>
    </div>
    </form>
</body>
</html>

页面后台代码:

public partial class MyFrame : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //获取传递过来的参数
            string city = Request.QueryString["city"];

            switch (city)
            {
                case "北京":
                    ddlAreaList.Items.Clear();
                    ddlAreaList.Items.Add("朝阳");
                    ddlAreaList.Items.Add("海淀");
                    ddlAreaList.Items.Add("东城");
                    ddlAreaList.Items.Add("西城");
                    break;
                case "上海":
                    ddlAreaList.Items.Clear();
                    ddlAreaList.Items.Add("浦东");
                    ddlAreaList.Items.Add("静安");
                    ddlAreaList.Items.Add("虹口");
                    ddlAreaList.Items.Add("徐汇");
                    break;
                case "济南":
                    ddlAreaList.Items.Clear();
                    ddlAreaList.Items.Add("历下");
                    ddlAreaList.Items.Add("历城");
                    ddlAreaList.Items.Add("市中");
                    ddlAreaList.Items.Add("天桥");
                    break;
                default:
                    break;
            }
        }
    }

转载于:https://www.cnblogs.com/ywblog/archive/2010/10/30/1865332.html

weixin_30797199
关注
JavaScript中iframe实现局部刷新的几种方法汇总
11-26
Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新。 Iframe的用法与普通的标签元素DIV类似，可以指定在页面中嵌入的位置、颜色、界面布局等 一、iframe实现局部刷新方法一 [removed] $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); $("#iframe").attr("src",name).ready(); }) $("#a2").click(function(){ var
＜iframe＞实现页面局部刷新
最新发布
qq_39702981的博客
10-24 985
实现页面局部刷新
利用iframe实现局部刷新
倾城一笑stu
08-26 2268
利用iframe来实现注册 1.reg.html 用户名： 密 码：   var username = document.getElementById("username"); var ifr = document.getElementById("ifr"); //绑定失去焦点事件 username.o
iframe页面实现局部刷新的效果
qq_42728930的博客
08-14 1045
后台管理页面左侧和头部固定，中间内容区域是iframe写的页面跳转，实现F5刷新和ctrl+r强制刷新不回首页，还是在当前页面。 在你想刷新的页面加入下代码 监听刷新事件然后设置localStorage.setItem(‘iframe_src’,url) window.addEventListener("beforeunload", function (e) { var u...
bootstarp+iframe 实现局部刷新 后台模板
10-19
在后台模板中，`iframe`通常被用来承载各个功能模块，如数据管理、设置等，这样当用户在不同模块间切换时，只需要加载`iframe`内的内容，而不是整个页面，实现了局部刷新的效果。 选项卡功能是另一种提高用户交互性...
基于AdminLTE（bootstrap）用iframe实现的局部刷新的案例
01-15
本案例主要探讨如何基于AdminLTE（一个基于Bootstrap的开源后台主题）利用iframe和JavaScript实现局部刷新功能，以提升用户体验。 AdminLTE是一个免费的响应式后台模板，其设计灵感来源于Twitter的Bootstrap框架，...
基于bootstrap用iframe实现的局部刷新的案例
01-14
在这个“基于bootstrap用iframe实现的局部刷新的案例”中，我们将探讨如何利用Bootstrap结合JavaScript（特别是与标签相关的操作）以及iframe元素来实现页面的局部刷新和tab页切换效果。 首先，Bootstrap的Tab组件...
iframe局部刷新
u011165335的博客
10-23 502
一、方法一 &lt;script type="text/javascript"&gt; $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); $("#iframe").attr("src",name).ready(); }) $("#a2&q
iframe实现页面局部刷新操作
09-26
使用iframe实现图片上传以及上传后的本页面无刷新展示。运行环境是php和jq
再iframe中刷新列表
11-18
fly.js技术，再iframe中刷新父元素列表，再弹出层中刷新父框架
用Iframe实现局部刷新
李逍遥的专栏
01-11 5507
Iframe FrameworkIframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新。Iframe的用法与普通的标签元素DIV类似，可以指定在页面中嵌入的位置、颜色、界面布局等 Iframe 框架常用属性
PHP网站使用JavaScript和Iframe简单实现部分刷新效果
weixin_34237596的博客
02-16 249
本文主要是记录自己寒假作业PHP网站实现加载界面的文章，运行效果如下图所示。主要记录php+html+Apache开发网站的3个功能：(方便以后阅读和其他人学习) 1.如何实现简单页面布局 2.使用jsp如何实现隐藏与显示效果 3.通过iframe实现局部动态更新页面内容一.运行效果 ...
iframe之局部刷新
thtwinj2ee的专栏
01-19 204
[size=x-large]例如: 方案一:用iframe的name属性定位 或 方案二:用iframe的id属性定位 方案三:当iframe的src为其它网站地址(跨域操作时) 方案四:通过和替换iframe的src来实现局部刷新 可以用document.getElementById("iframname").src=""来进行iframe得重定向；...
iframe局部刷新的二种实现方法
weixin_30394633的博客
04-26 323
需求描述： 当页面有一部分是不变的或整个页面的图片很多时，可以考虑使用局部刷新，以提高整体的下载速度与用户体验。 1，iframe实现局部刷新的方法一 复制代码代码示例: <script type="text/javascript"> $(function(){ $("#a1").click(function(...
用iframe实现的网页局部刷新
热门推荐
\\\布谷鸟///的专栏
09-12 1万+
    网上经常有人想要实现不刷新从服务器取数据的需求。本人理解就是局部刷新或者是隐藏刷新。有点象“偷偷摸摸”地从服务器拿数据而不让用户发觉的意思。本人想要实现局部刷新的思路是出于以下考虑的：    当用户点击一个应用菜单后，要将此菜单代码保存在数据库中，而且要在“最近使用过的菜单”中显示出来。因为应用菜单项非常多，刷新一次要消耗相当多的资源，所以就想只刷新“最近使用过的菜单”，因为只取前十项，所
iframe刷新技巧：局部与全局刷新实现
"这篇文章主要介绍了在网页开发中针对iframe框架的各种刷新方法，包括局部刷新、动态刷新以及使用window.location.href的刷新方式。同时，还提到了一些其他刷新页面的技巧和注意事项。" 在Web开发中，iframe（内联...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值