今天做項目遇到一個問題。就是提交表單的時候,驗證用戶名是否存在和驗證碼是否正確。
當驗證碼或者用戶名存在的時候。在后臺彈窗提示。可頁面原本file里面符合要求的值刷新沒了。用戶體驗不好。因為用ifream刷新技術已不是什么新鮮技術。所以網上有大把的資料可參考。只是因為本人是初次接觸。所以記下自己的知識點。當成長經歷。對于入門的我們先來全名了解下。
什么是iframe
Iframe是Inline Frame的縮寫,稱為內聯框架(即行內框架)。看著很眼熟吧,對了,它有個近親可是大名鼎鼎的Frame(框架)標記。使用框架有兩個缺點:占用了寶貴的顯示面積、不利于保持網站整體風格。而使用Iframe則可以避免此類缺點。它可以在網頁的局部插入另一個文件,更新時只要更改所插入的文件即可
Iframe標記格式使用:
<iframe src="http://www.cnblogs.com" width=830 heitht=999 ?scrolling="yes"></iframe>
????????????
?
src:文件的路徑,既可是HTML文件,也可以是文本、ASP等;
width、height:“畫中畫“區域的寬與高;
scrolling:當src的指定的HTML文件在指定的區域不顯不完時,滾動選項,如果設置為NO,則不出現滾動條;如為Auto:則自動出現滾動條;如為Yes,則顯示;
FrameBorder:區域邊框的寬度,為了讓“畫中畫“與鄰近的內容相融合,常設置為0。
iframe框架與form表單實例
我們經常做的是在頁面放一個隱藏的iframe,然后把form的target屬性指向iframe的name屬性
<!--這里設置target="ajaxifr",這樣表單就提交到iframe里面了,和平時未設置target屬性時默認提交到當前頁面 -->
<iframe name="ajaxifr" runat="server" style="display:block;"></iframe>
<form method="post" runat ="server" enctype="multipart/form-data" action="check.ashx" target="ajaxifr" οnsubmit="return check()" >
??? 選擇文件:<input type="file" name="upfile" /><br />
?? <input type="submit" runat="server" value="提交" />
</form>
現在action的頁面是子窗體,即check.ashx,from當前頁面為父頁面。
在父窗體中,Iframe即子窗體是document對象的一個子對象,可以直接在腳本中訪問子窗體中的對象。
在子窗體中我們可以通過其parent即父(雙親)對象來訪問父窗口中的對象。
function msg() {alert("回調"); } //通過parent訪問父頁面的函數。實現回調 Response.Write("<script>parent.msg()</script>"); //如果不想回調,只想彈窗,可以加parent也可以不加(因為彈窗會在頂層顯示),其他的同理 Response.Write("<script>parent.alert('提示')</script>"); //重定向 Response.Write("<script>parent.window.location.href='http://www.cnblogs.com'</script>"); //記住:這里如果不用parent(主動權交給父頁面),那就會在iframe中打開網頁,
//那當我們回調顯示的時候。在前臺就永遠都不會看到跳轉的頁面。除非你要求在iframe中打開
?最后附一個完整的實例。僅僅是圖片上傳并回調顯示圖片信息
?
$("#id", window.parent.document).val("cc");
var btn = ifmMain.window.document.getElementById("id");
index.aspx頁面


1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="tlxRegist.Test.WebForm2" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 8 </head> 9 <body> 10 <script type="text/javascript"> 11 function UpdateMsg(des, filename) {//此函數用來提供給提交到的頁面如upload.ashx輸出js的回調,更新當前頁面的信息 12 if (filename == '') { alert('未上傳文件!'); return false; } 13 document.getElementById('ajaxMsg').innerHTML = '你在表單中輸入的“文件描述”為:' + des + '<br/>' 14 + '上傳的圖片為:<a href="uploads/' + filename + '" target="_blank">' + filename + '</a>'; 15 } 16 17 function check(f) { 18 if (f.des.value == '') { 19 alert('請輸入文件描述!'); f.des.focus(); return false; 20 } 21 if (f.upfile.value == '') { 22 alert('請選擇文件!'); f.upfile.focus(); return false; 23 } 24 } 25 </script> 26 <!--隱藏的iframe來接受表單提交的信息--> 27 <iframe name="ajaxifr" style="display:none;"></iframe> 28 <!--這里設置target="ajaxifr",這樣表單就提交到iframe里面了,和平時未設置target屬性時默認提交到當前頁面--> 29 <!--注意一點的是使用iframe時在提交到的頁面可以直接輸出js來操作父頁面的信息,一般的ajax提交文本信息時你需要返回信息,如果是js信息你還得eval下--> 30 <form method="post" enctype="multipart/form-data" action="../upload.ashx" target="ajaxifr" οnsubmit="return check(this)"> 31 文件描述:<input type="text" name="des" /><br /> 32 選擇文件:<input type="file" name="upfile" /><br /> 33 <input type="submit" value="提交" /> 34 </form> 35 <!--放入此div用來實現上傳的結果--> 36 <div id="ajaxMsg"> 37 </div> 38 39 </body> 40 </html>
?
upload.ashx處理程序


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("<script>parent.UpdateMsg('','');</script>");//輸出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("<script>parent.UpdateMsg('" + Js(des) + "','" + newFileName + "')</script>"); 37 } 38 catch 39 { 40 Response.Write("<script>alert('保存文件失敗!\\n請檢查文件夾是否有寫入權限!');</script>");//如果保存失敗,輸出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" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript">//重新設置編輯區域高度 function setHeight() {var h = document.documentElement.clientHeight - 90;var w = document.documentElement.clientWidth - 23;if (h > 0) { document.getElementById("tabMain").style.height = h.toString() + "px"; }var ifmA = document.getElementById("ifmA");var ifmB = document.getElementById("ifmB");if (w > 0) { ifmA.style.width = w.toString() + "px"; }if (w > 0) { ifmB.parentNode.parentNode.style.width = w.toString() + "px"; }if (ifmA.readyState == "complete") {var ih = ifmA.contentWindow.document.body.offsetHeight;if (ih > 0) { ifmA.style.height = (ih + 5).toString() + "px"; }}if (ifmB.readyState == "complete") {var oh = ifmB.contentWindow.document.body.offsetHeight;if (oh > 0) { ifmB.style.height = (oh + 5).toString() + "px"; }}}function PageLoad() {var ifmA = document.getElementById("ifmA");var ifmB = document.getElementById("ifmB");setIFrameResize(ifmA, setHeight);setIFrameResize(ifmB, setHeight);}function setIFrameResize(iframe, fun) {iframe.parentNode.onresize = setHeight;iframe.onreadystatechange = function (ev) {if (iframe.readyState == "complete") {var ic = iframe.contentWindow;ic.attachEvent('onload', fun);ic.attachEvent('onresize', fun);}}}window.onload = PageLoad;window.attachEvent("onload", setHeight);window.attachEvent("onresize", setHeight);</script> </head> <body><form id="form1" runat="server"><div id="tabMain"><div style="background-color: gray;">A頁面</div><div><iframe id="ifmA" name="ifmA" width="100%" frameborder="0" marginwidth="0"scrolling="auto" src="a.aspx"></iframe></div><div style="background-color: gray;">B頁面</div><div><iframe id="ifmB" name="ifmB" width="100%" frameborder="0" marginwidth="0"scrolling="auto" src="b.aspx"></iframe></div></div></form> </body> </html>
?
添加回車事件
?<input οnkeypress="getKey(event)" >
?
function getKey(e)
{
var e = e || window.event;
if (e.keyCode == 13) {
$("#btnSearch").trigger("click"); //處罰按鈕的click事件
}
}
?