iframe实现局部刷新和回调--开篇

今天做项目遇到一个问题。就是提交表单的时候，验证用户名是否存在和验证码是否正确。

当验证码或者用户名存在的时候。在后台弹窗提示。可页面原本file里面符合要求的值刷新没了。用户体验不好。因为用ifream刷新技术已不是什么新鲜技术。所以网上有大把的资料可参考。只是因为本人是初次接触。所以记下自己的知识点。当成长经历。对于入门的我们先来全名了解下。

什么是iframe

Iframe是Inline Frame的缩写，称为内联框架（即行内框架）。看着很眼熟吧，对了，它有个近亲可是大名鼎鼎的Frame（框架）标记。使用框架有两个缺点：占用了宝贵的显示面积、不利于保持网站整体风格。而使用Iframe则可以避免此类缺点。它可以在网页的局部插入另一个文件，更新时只要更改所插入的文件即可

Iframe标记格式使用：

　　

            

 

　　src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
　　width、height：“画中画“区域的宽与高；
　　scrolling:当src的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
　　FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

iframe框架与form表单实例

我们经常做的是在页面放一个隐藏的iframe,然后把form的target属性指向iframe的name属性

    选择文件：

   

现在action的页面是子窗体，即check.ashx，from当前页面为父页面。

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

function msg()
{
   alert("回调");       
}
//通过parent访问父页面的函数。实现回调
Response.Write("");
//如果不想回调，只想弹窗，可以加parent也可以不加（因为弹窗会在顶层显示），其他的同理
Response.Write("");
//重定向
Response.Write(""); //记住：这里如果不用parent(主动权交给父页面)，那就会在iframe中打开网页，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//那当我们回调显示的时候。在前台就永远都不会看到跳转的页面。除非你要求在iframe中打开

 最后附一个完整的实例。仅仅是图片上传并回调显示图片信息

 

$("#id", window.parent.document).val("cc");

var btn = ifmMain.window.document.getElementById("id");

index.aspx页面

View Code

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="tlxRegist.Test.WebForm2" %>
 2 
 3 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 "http://www.w3.org/1999/xhtml">
 5 "server">
 6     
 7     
 8 
 9 
10     
26     
27     
28     
29     
30     
"post" enctype="multipart/form-data" action="../upload.ashx" target="ajaxifr" οnsubmit="return check(this)">
31     文件描述："text" name="des" />

32     选择文件："file" name="upfile" />

33     "submit" value="提交" />
34     
35     
36     
"ajaxMsg">
37     
38 
39 
40 

 

upload.ashx处理程序

View Code

 1 <%@ WebHandler Language="C#" Class="upload" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class upload : IHttpHandler {
 7     private string Js(string v)
 8     {//此函数进行js的转义替换的，防止字符串中输入了'后造成回调输出的js中字符串不闭合
 9         if (v == null) return "";
10         return v.Replace("'", @"\'");
11     }
12     //下面就是一个简单的示例，保存上传的文件，如果要验证上传的后缀名，得自己写，还有写数据库什么的
13     public void ProcessRequest(HttpContext context)
14     {
15         HttpRequest Request = context.Request;
16         HttpResponse Response = context.Response;
17         HttpServerUtility Server = context.Server;
18         //指定输出头和编码
19         Response.ContentType = "text/html";
20         Response.Charset = "utf-8";
21 
22         HttpPostedFile f = Request.Files["upfile"];//获取上传的文件
23         string des = Request.Form["des"]//获取描述
24             , newFileName = Guid.NewGuid().ToString();//使用guid生成新文件名
25 
26         if (f.FileName == "")//未上传文件
27             Response.Write("");//输出js，使用parent对象得到父页的引用
28         else
29         { //保存文件
30             newFileName += System.IO.Path.GetExtension(f.FileName);//注意加上扩展名
31             try
32             {
33                 f.SaveAs(Server.MapPath("~/uploads/" + newFileName));//如果要保存到其他地方，注意修改这里
34 
35                 //调用父过程更新内容，注意要对des变量进行js转义替换，繁殖字符串不闭合提示错误
36                 Response.Write("");
37             }
38             catch
39             {
40                 Response.Write("");//如果保存失败，输出js提示保存失败
41             }
42 
43         }
44     }
45 
46     public bool IsReusable
47     {
48         get
49         {
50             return false;
51         }
52     }
53 
54 }

 

IE8中IFrame高度自适应

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



"http://www.w3.org/1999/xhtml">
"server">
    "Content-Type" content="text/html; charset=utf-8" />
    
    


    
"form1" runat="server">
        
"tabMain">
            
"background-color: gray;">A页面
            

                
            
            
"background-color: gray;">B页面
            

                
            
        
    

View Code

 

添加回车事件

 

 

function getKey(e)
{
var e = e || window.event;
if (e.keyCode == 13) {
$("#btnSearch").trigger("click"); //处罚按钮的click事件
}
}

 

转载于:https://www.cnblogs.com/nsky/archive/2012/12/21/2827300.html