你知道FRAME吗? 框架....
其实iframe和frame差不多,也是一个框架,只是因为frame更简单,效果更丰富,有画中画之称...
说通俗点:就是在一个网页中调入另一个网页!但不像include,因为他们是单立的,有个自的<HTNL>标记...
怎么用?
一、Iframe标记的使用
提起Iframe，可能你早已将之扔到'被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧
结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个
'上一节'、'下一节'的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌
烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改
变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是
将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用
的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，
另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即'画中画'电视。
现在我们谈一下Iframe标记的使用。
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动
条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让'画中画'与邻近的内容相融合，常设置为0。
比如:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
二、父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体
中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档
对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body οnclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个'独立王国'哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或
函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需
修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己
三、IFrame也可以编辑文字
有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。
<html>
<body οnlοad="editer.document.designMode='On'">
<IFrame ID="editer"></IFrame>
</body>
</html>
其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！
只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。
<html>
<body οnlοad="imgEditer.document.designMode='On';imgEditer.document.write('<img src=图片.gif>')">
<IFrame id="imgEditer"></IFrame>
</body>
</html>
一、Iframe标记的使用
提起Iframe，可能你早已将之扔到'被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧
结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个
'上一节'、'下一节'的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌
烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改
变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是
将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用
的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，
另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即'画中画'电视。
现在我们谈一下Iframe标记的使用。
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动
条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让'画中画'与邻近的内容相融合，常设置为0。
比如:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
二、父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体
中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档
对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body οnclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个'独立王国'哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或
函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需
修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己
三、IFrame也可以编辑文字
有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。
<html>
<body οnlοad="editer.document.designMode='On'">
<IFrame ID="editer"></IFrame>
</body>
</html>
其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！
只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。
<html>
<body οnlοad="imgEditer.document.designMode='On';imgEditer.document.write('<img src=图片.gif>')">
<IFrame id="imgEditer"></IFrame>
</body>
</html>
简单介绍下它的用法：
一.AjaxPro的使用
1.在项目中添加引用，浏览找到AjaxPro.2.dll文件
2.在Web.config中的system.web里面写入以下代码
</configuration>
<system.web>
<httpHandlers>
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>
<//configuration>
3.在加载事件中，加入
AjaxPro.Utility.RegisterTypeForAjax(typeof(类名));
4.写的方法都要用
[AjaxPro.AjaxMethod]开头，然后在写方法
5.调用时必须写清楚
命名空间名.类名.方法，例:WebUI._Default.getData();
6.调用可分两中方法(同步调用，异步调用)
//在后台写的无参方法
[AjaxPro.AjaxMethod]
public string getStr()
{
return "hello my friends";
}
//在后台写的有参方法
[AjaxPro.AjaxMethod]
public string getString(string str)
{
return str + "Say: hello my friends";
}
a.同步调用
(1).拖入html控件button
(2).双击,自动显示在.aspx的脚本中
(3).在里面写入你要输入的内容
例:
//------------------同步调用无参-----------
function Button1_onclick()
{
var res=WebUI._Default.getStr();
alert(res.value);
}
//------------------同步调用有参------------
function Button2_onclick() //TextBox1为服务器控件
{
var str=document.getElementById("<%=TextBox1.ClientID%>").value;
var res=WebUI._Default.getStr(str);
alert(res.value);
}
b.异步调用
(1).拖入html控件button
(2).双击,自动显示在.aspx的脚本中
(3).在里面写入你要输入的内容
例：
//-----------------异步调用无参-----------------
function Button3_onclick() {
WebUI._Default.getStr(getStrCallBack);
}
function getStrCallBack(res)
{
alert(res.value);
}
//-----------------异步调用有参-----------------
function Button4_onclick() {
var str=document.getElementById("<%=TextBox1.ClientID %>").value;
WebUI._Default.getString(str,getStringCallBack);
}
function getStringCallBack(res)
{
alert(res.value);
}
7.调用对象
//对象
[AjaxPro.AjaxMethod]
public Class getClass()
{
Class cla = new Class();
cla.C_Id = 100;
cla.C_Name = "34班";
cla.Count = 20;
return cla;
}
//------------------同步调用对象-----------
function Button5_onclick() {
var res=WebUI._Default.getClass().value;
alert("班级编号："+res.C_Id+"名称："+res.C_Name+"人数："+res.Count);
}
//------------------异步调用对象-----------
function Button6_onclick() {
WebUI._Default.getClass(getClassCallBack);
}
function getClassCallBack(clas)
{
var res=clas.value;
alert("班级编号："+res.C_Id+"名称："+res.C_Name+"人数："+res.Count);
}
8.数据集的使用
//方法
[AjaxPro.AjaxMethod]
public DataSet getInfo()
{
return WebUI.GetDataSet.getList();
}
//--------------------异步调用数据集--------------
function Button8_onclick() {
WebUI._Default.getInfo(getDataSetCallBack);
}
function getDataSetCallBack(res)
{
var dataset=res.value;
var strHtml="";
strHtml +='<table style ="border-collapse:collapse ; border-color:Gray ;" border="1px">';
strHtml +=' <tr>';
strHtml +=' <td>学生编号</td>';
strHtml +=' <td>名称</td>';
strHtml +=' <td>年龄</td>';
strHtml +=' </tr>';
for(var i=0;i<dataset.Tables[0].Rows.length;i++)
{
strHtml +=' <tr>';
strHtml +=' <td>'+ dataset.Tables[0].Rows[i].stu_id +'</td>';
strHtml +=' <td>'+ dataset.Tables[0].Rows[i].stu_name +'</td>';
strHtml +=' <td>'+ dataset.Tables[0].Rows[i].stu_age +'</td>';
strHtml +=' </tr>';
}
strHtml +=' </table>';
thedata.innerHTML=strHtml;//thedata是一个<div id="thedata"></div>中的thedata
}
9.验证码的使用
//----------------------验证码的使用(必须采用同步调用)----------------------
//验证码的使用
[AjaxPro.AjaxMethod]
public bool ValidCodeData(string code)
{
return (HttpContext.Current.Session["CheckCode"].ToString()==code);
}
function Button9_onclick() {
var code=document.getElementById("<%=TextBox2.ClientID %>").value;
var bool=WebUI._Default.ValidCodeData(code).value;
if(bool==true)
{
alert("ok");
}else
{
alert("no");
}
}
AjaxPro.dll文件网上很多的，自己下，如果找不到呢，给我发个留言，我发你邮箱
二，直接调用：
javascript中：<%=后台方法%>
function says()
{
alert("<%=Say()%>");
}
function del()
{
alert("<%=DeleteByID(8)%>");//DeleteByID(8)后台方法名
}
三，采用ICallbackEventHandler回调
//必须声明System.Web.UI.ICallbackEventHandler接口
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
//定义一个回调的返回值
private string Result;
//定义两个变量，用来接收页面传过来到操作数
private string Num1;
private string Num2;
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 该方法是回调执行的方法，根据参数在这个方法中处理回调的内容,该方法没有返回值
/// </summary>
/// <param name="eventArgument">此参数是从客户端传过来的</param>
public void RaiseCallbackEvent(string eventArgument)
{
//eventArgumeng 为javascript从客户端传递的参数，本例传过来三个参数用“/”分割将每个参数取出存入数组
string[] PagParams = eventArgument.Split('/');
Num1 = PagParams[1];
Num2 = PagParams[2];
//根据第一个参数（所选的操作符），调用不同的执行函数
switch (PagParams[0])
{
case "0":
Result = add(); break;
case "1":
Result = sub(); break;
case "2":
Result = multi(); break;
case "3":
Result = division(); break;
}
}
/// <summary>
/// 该方法是返回回调的结果给客户端
/// </summary>
/// <returns></returns>
public string GetCallbackResult()
{
return Result;
}
//一下四个函数是通过RaiseCallbackEvent方法，调用的回调要执行操作的函数
private string add()
{
double addResult = double.Parse(Num1) + double.Parse(Num2);
return addResult.ToString();
}
private string sub()
{
double addResult = double.Parse(Num1) - double.Parse(Num2);
return addResult.ToString();
}
private string multi()
{
double addResult = double.Parse(Num1) * double.Parse(Num2);
return addResult.ToString();
}
private string division()
{
double addresult = double.Parse(Num1) / double.Parse(Num2);
return addresult.ToString();
}
}
VS2005中AJAX使用方法
//声明一个AJAX命名空间Ajax_showPL，在每个类定义之前加上此句。（注意：Web2.0不支持命名空间，他把所有的类都放在自己生成的App_Code文件夹中）
[AjaxPro.AjaxNamespace("Ajax_showPL")]
// HT_ShowPL_QT是一个类，在这个类中注册AJAX远程处理方法,把这句代码加在页面加载的事件中。这里用到了反射(反射是.NET中获取运行时类型信息的方式,让程序员可以在程序运行期获得程序集，模块，类的相关信息)
AjaxPro.Utility.RegisterTypeForAjax(typeof(HT_ShowPL_QT));
//声明AJAX方法，在每个AJAX方法前面加上此句代码。
[AjaxPro.AjaxMethod]
//同时，要在Web.config配置文件中做相应的修改。
<?xml version="1.0" encoding="gb2312" ?>
<!--
注意: 除了手动编辑此文件以外，您还可以使用
Web 管理工具来配置应用程序的设置。可以使用Visual Studio 中的
“网站”->“Asp.Net 配置”选项。
设置和注释的完整列表在
machine.config.comments 中，该文件通常位于
\Windows\Microsoft.Net\Framework\v2.x\Config 中
-->
<configuration>
<!--
AJAX配置begin===================
-->
<configSections>
<sectionGroup name="ajaxNet">
<!--
If you are using Microsoft .NET 1.1 please remove the two attributes
requirePermission and restartOnExternalChanges, they are only supported
with .NET 2.0.
-->
<section name="ajaxSettings" type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2" requirePermission="false" restartOnExternalChanges="true"/>
</sectionGroup>
</configSections>
<ajaxNet>
<ajaxSettings>
<urlNamespaceMappings useAssemblyQualifiedName="false">
<!--
Set the attribute useAssemblyQualifiedName to true to enable
use of assemblies placed in the GAC by using the full assembly
qualified name.
To hide internal knowledge of assemblies, classes and namespace
you can override the name of the virtual http endpoints.
<add type="Namespace.Class1,Assembly" path="mypath" />
-->
</urlNamespaceMappings>
<jsonConverters>
<!--
This section can be used to add new IJavaScriptConverters to the
Ajax.NET Professional engine. If you want to disable built-in
converters you can use the remove tag.
<remove type="Namespace.Class1,Assembly"/>
<add type="Namespace.Class2,Assembly"/>
-->
</jsonConverters>
<!--
Set the enabled attribute to true to get Stack, TargetSize and Source
information if an exception has been thrown.
-->
<debug enabled="true"/>
<!--
This is the default configuration used with Ajax.NET Professional. You
can put there your static JavaScript files, or remove the path attribute
to completly disable the files.
<scriptReplacements>
<file name="core" path="~/ajaxpro/core.ashx" />
<file name="prototype" path="~/ajaxpro/prototype.ashx" />
<file name="converter" path="~/ajaxpro/converter.ashx" />
</scriptReplacements>
-->
<!-- <encryption cryptType="" keyType="" /> -->
<!--
Set the enabled attribute to true to enable the use of an Ajax.NET Professional
token. This will send a token to the client that will be used to identify if the
requests comes from the same PC.
-->
<token enabled="false" sitePassword="password"/>
<!--
The oldStyle section can be used to enable old styled JavaScript code or
functions that are not used any more.
<oldStyle>
<objectExtendPrototype/>
<appCodeQualifiedFullName/>
</oldStyle>
-->
</ajaxSettings>
</ajaxNet>
<!-- Handler configuration for Ajax.NET Professional -->
<location path="ajaxpro">
<system.web>
<httpHandlers>
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
<!--
If you need to have Ajax.NET Professional methods running on the
login page you may have to enable your own authorization configuration
here.
-->
<!--
<authorization>
<deny users="?"/>
</authorization>
-->
</system.web>
</location>
<!--
If you are using Ajax.NET Professional with forms authentication you may need
to allow ASP.NET to have access to following three files.
-->
<!--
<location path="ajaxpro/prototype.ashx">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
<location path="ajaxpro/core.ashx">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
<location path="ajaxpro/converter.ashx">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
-->
<!--
AJAX配置over===================
-->
<appSettings>
<add key="ConnectString" value="server=100ZZ-1\SQLEXPRESS;database=my_wxfl;user id=bbbb;password=bbbb"/>
<add key="open_Log" value="1"/>
<add key="local_url" value="F:\ceshiB\upfile\"/>
</appSettings>
<connectionStrings/>
<system.web>
<!--
设置compilation debug="true" 将调试符号插入
已编译的页面中。但由于这会
影响性能，因此只在开发过程中将此值
设置为true。
-->
<compilation debug="true">
<assemblies>
<add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
<add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Management, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
</assemblies>
</compilation>
<!--
通过<authentication> 节可以配置ASP.NET 使用的
安全身份验证模式，
以标识传入的用户。
-->
<identity impersonate="true"/> <!--加用户权限-->
<authentication mode="Windows"/>
<!--
如果在执行请求的过程中出现未处理的错误，
则通过<customErrors> 节可以配置相应的处理步骤。具体说来，
开发人员通过该节可以配置
要显示的html 错误页
以代替错误堆栈跟踪。
<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
<error statusCode="403" redirect="NoAccess.htm" />
<error statusCode="404" redirect="FileNotFound.htm" />
</customErrors>
-->
<globalization requestEncoding="gb2312" responseEncoding="gb2312" />
<roleManager enabled="true"/>
<!--
上传最大限制容量6M
<httpRuntime executionTimeout="9000"
maxRequestLength="709600"
useFullyQualifiedRedirectUrl="false"
minFreeThreads="8"
minLocalRequestFreeThreads="4"
appRequestQueueLimit="100"
enableVersionHeader="true"/>
-->
</system.web
<!--=========== AJAX配置＝＝＝＝＝＝＝＝＝＝＝＝ -->
</configuration>
扫一扫
2416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
