iframe實現局部刷新和回調--開篇

今天做項目遇到一個問題。就是提交表單的時候,驗證用戶名是否存在和驗證碼是否正確。

當驗證碼或者用戶名存在的時候。在后臺彈窗提示。可頁面原本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頁面

View Code
 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處理程序

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("<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>
View Code

?

添加回車事件

?<input οnkeypress="getKey(event)" >

?

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/376993.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/376993.shtml
英文地址,請注明出處:http://en.pswp.cn/news/376993.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java文件類boolean setExecutable(boolean exec_file,boolean owner_access)方法,帶示例

文件類boolean setExecutable(boolean exec_file&#xff0c;boolean owner_access) (File Class boolean setExecutable(boolean exec_file , boolean owner_access)) This method is available in package java.io.File.setExecutable(boolean exec_file , boolean owner_acc…

OLTP 系統和 OLAP 系統的核心設計思想

關于 OLTP 系統和 OLAP 系統的核心設計思想 數據存儲系統的關于查詢的典型操作&#xff1a; -- 第一種需求&#xff1a; 根據 key&#xff08;1&#xff09; 找 value&#xff08;name,age&#xff09;&#xff0c; 單點查詢 select name, age from student where id 1; stu…

虛擬機

vt-x 虛擬技術的硬盤支持。想像成“硬解碼”的東東。不是裝虛擬機必須的&#xff0c;但有它效果會好些。 vt-x檢測工具&#xff1a;securable.exe 下載地址&#xff1a;http://pan.baidu.com/s/1kTBOvzD Hardware Virtualization選項&#xff1a; no [CPU和BIOS都不支持VT] loc…

算法(轉)

歡迎自薦和推薦鏈接。 算法 優秀博客推薦&#xff1a;各種數據結構與算法知識入門經典&#xff08;不斷更新)基本算法 貪心算法&#xff1a;貪心算法 作者&#xff1a;獨酌逸醉 貪心算法精講 作者&#xff1a;3522021224 遞歸和分治&#xff1a;遞歸與分治策略 …

sjf調度算法_如何通過靜態方法預測SJF調度中未來過程的突發時間?

sjf調度算法In SJF Scheduling, CPU is assigned to the process having the smallest burst time but it can not be implemented practically, because we dont know burst time of the arrived processes in advance. 在SJF Scheduling中 &#xff0c;將CPU分配給具有最短突…

flask 知識點總結

request對象的常用屬性具體使用方法如下:request.headers, request.headers.get(If-None-Match)request.json, request.json[value] 或 request.json.get(detail_msg, "")request.args, request.args.get(limit, 10)來獲取query parametersrequest.form, request.for…

Postgresql中的hybrid hash join(無狀態機講解)

hybrid hash join hybrid hash join是基于grace hash join 的優化。 在postgresql中的grace hash join 是這樣做的&#xff1a;inner table太大不能一次性全部放到內存中&#xff0c;pg會把inner table 和outer table按照join的key分成多個分區&#xff0c;每個分區(有一個inn…

末日中的黎明

哈哈&#xff0c; 今天是2012-12-21&#xff0c;傳說中的世界末日&#xff0c;不過現在看來&#xff0c;一切都是空的。。。 在這個容易記憶的日子里&#xff0c;我的博客開通了。他將伴隨我以后的學習開發&#xff0c;期望我能充分利用博客&#xff0c;幫我養成常總結、常記筆…

使用numpy.tanh()打印矢量/矩陣元素的雙曲正切值 使用Python的線性代數

Prerequisite: 先決條件&#xff1a; Defining a Vector 定義向量 Defining a Matrix 定義矩陣 Numpy is the library of function that helps to construct or manipulate matrices and vectors. The function numpy.tanh(x) is a function used for generating a matrix / v…

Mahout kmeans聚類

Mahout K-means聚類 一、Kmeans 聚類原理 K-means算法是最為經典的基于劃分的聚類方法&#xff0c;是十大經典數據挖掘算法之一。K-means算法的基本思想是&#xff1a;以空間中k個點為中心進行聚類&#xff0c;對最靠近他們的對象歸類。通過迭代的方法&#xff0c;逐次更新各聚…

Web項目中獲取SpringBean——在非Spring組件中獲取SpringBean

最近在做項目的時候我發現一個問題&#xff1a;Spring的IOC容器不能在Web中被引用(或者說不能被任意地引用)。我們在配置文件中讓Spring自動裝配&#xff0c;但并沒有留住ApplicationContext的實例。我們如果希望在我們的項目中任何位置都能拿到同一個ApplicationContext來獲取…

postgresql對于HashJoin算法的Data skew優化與MCV處理

Data skew 很好理解&#xff0c;即數據傾斜。現實中的數據很多都不是正態分布的&#xff0c;譬如城市人口&#xff0c;東部沿海一個市的人口與西部地區一個市地區的人口相比&#xff0c;東部城市人口會多好幾倍。 postgresql的skew的優化核心思想是"避免磁盤IO"。 優…

JavaScript | 創建對象并通過JavaScript函數在表中顯示其內容

In this example, we created an object named employee with id, name, gender, city, and salary and assigned and displaying the values in the table using JavaScript function. 在此示例中&#xff0c;我們創建了一個名為employee的對象&#xff0c;其對象為id &#x…

基于socket的簡單文件傳輸系統

【實驗目的及要求】 在 Uinx/Linux/Windows 環境下通過 socket 方式實現一個基于 Client/Server 文件傳輸程序。 【實驗原理和步驟】 1. 確定傳輸模式:通過 socket 方式實現一個基于 Client/Server 或 P2P 模式的文件傳輸程序。 2. 如果選擇的是 Client/Server 模式的文件傳輸…

《GPU高性能編程-CUDA實戰》中例子頭文件使用

《GPU高性能編程-CUDA實戰&#xff08;CUDA By Example&#xff09;》中例子中使用的一些頭文件是CUDA中和C中本身沒有的&#xff0c;需要先下載這本書的源碼&#xff0c;可以在&#xff1a;https://developer.nvidia.com/content/cuda-example-introduction-general-purpose-g…

mcq 隊列_人工智能| AI解決問題| 才能問題解答(MCQ)| 套裝1

mcq 隊列1) Which of the following definitions correctly defines the State-space in an AI system? A state space can be defined as the collection of all the problem statesA state space is a state which exists in environment which is in outer spaceA state sp…

Postgresql的HashJoin狀態機流程圖整理

狀態機 可以放大觀看。 HashJoinState Hash Join運行期狀態結構體 typedef struct HashJoinState {JoinState js; /* 基類;its first field is NodeTag */ExprState *hashclauses;//hash連接條件List *hj_OuterHashKeys; /* 外表條件鏈表;list of …

Ajax和Jsonp實踐

之前一直使用jQuery的ajax方法&#xff0c;導致自己對瀏覽器原生的XMLHttpRequest對象不是很熟悉&#xff0c;于是決定自己寫下&#xff0c;以下是個人寫的deom&#xff0c;發表一下&#xff0c;聊表紀念。 Ajax 和 jsonp 的javascript 實現&#xff1a; /*! * ajax.js * …

得到前i-1個數中比A[i]小的最大值,使用set,然后二分查找

題目 有一個長度為 n 的序列 A&#xff0c;A[i] 表示序列中第 i 個數(1<i<n)。她定義序列中第 i 個數的 prev[i] 值 為前 i-1 個數中比 A[i] 小的最大的值&#xff0c;即滿足 1<j<i 且 A[j]<A[i] 中最大的 A[j]&#xff0c;若不存在這樣的數&#xff0c;則 pre…

學習語言貴在堅持

學習語言貴在堅持 轉自&#xff1a;http://zhidao.baidu.com/link?urlr2W_TfnRwipvCDLrhZkATQxdrfghXFpZhkLxqH1oUapLOr8jXW4tScbyOKRLEPVGCx0dUfIr-30n9XV75pWYfK給大家介紹幾本書和別處COPY來的學習C50個觀點 《Thinking In C》&#xff1a;《C編程思想》&#xff1b; 《The…