<iframe>是框架的一种形式,也比较常用到。
例子1。
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>
width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder 边框大小;src是要显示的页面
注意:URL建议用绝对路径
<iframe width=0 height=0 frameborder=0 scrolling=auto src=http://www.baidu.com></iframe>
例子2。
如果一个页面里面有框架。。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定)
<iframe name=** ></iframe>
然后在修改默认打开模式,:网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为(**)
例子3。
要插入一个页面。要求只拿中间一部分。其他的都不要。,。。
代码:
<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="www.baidu.com" frameborder=no scrolling=no width=776 height=2500></iframe>
控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170
scrolling滚动条要否(auto、yes、no) frameborder框架的边框大小,width=776 height=2500此框架的大小。
内框架Iframe的使用
使用Iframe可以在一人表格内调用一个外部文件,是非常有用的。本网站在很多页面上都使用了iframe效果。
现在我们学一下Iframe标记的使用。
Iframe标记的使用格式是:
- <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>
比如:
- <Iframe src="http://campo.3322.net" width="250" height="200" scrolling="Auto" frameborder="0" name="main"></iframe>
<Iframe src="http://campo.3322.net" width="250" height="200" scrolling="Auto" frameborder="0" name="main"></iframe>
当你想用父框架控制内部框架时,可以使用: target="框架的名字"来控制。
IFrame也可以编辑文字
有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢?只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。
- <html>
- <body οnlοad="editer.document.designMode='On'">
- <IFrame ID="editer"></IFrame>
- </body>
- </html>
<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>
无刷新应用
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <body> <form action="handle.jsp" target="myHidFrame" method="POST"> <div id="myDiv"> UserName:<input type="text" name="username"/> <br> PassWord:<input type="text" name="password"/> <br><input type="submit" value="submit"/> </div> </form> <iframe name="myHidFrame" width="1" height="1"></iframe> </body> </html>
handle.jsp
<% String username = request.getParameter("username"); String password = request.getParameter("password"); String result = "error"; if(username.equals("wzj")&&password.equals("123")){ result = "success"; } out.println("<script language=\"javascript\">parent.document.getElementById(\"myDiv\").innerHTML=\""+result+"\";</script>"); %>
iframe局部刷新
function ref(name)
{
var linkname=name;
documents.iframe.src=linkname;
document.iframe.location.reload();
}
</script>
<iframe name="iframe" src="home.htm"></iframe>
<table><tr><td>
- <a href="gsjianjie.htm" name="gsjianjie.htm" onClick="ref('name')">公司简介</a><br>
- <a href="zzjigou.htm" name="zzjigou.htm" onClick="ref('name')>组织机构</a><br>
- <a href="gswenhua.htm" name="gswenhua.htm" onClick="ref('name')>公司文化</a>
</td></tr></table>
其实就是重刷IFRAME的内容
利用IFRAME实现得到后台数据的方法:
将表单提交到本页面上的隐藏IFRAME中(即把处理页面(如handle.jsp)放到内框架中),处理完后handle.jsp写JS语句调用父窗口的方法或赋值(parent.FarSay(), parent.document.getElementById(xx).value=?)
父调用子:window.frames["iframe_text"].document.getElementById("myH1").innerHTML ="??";
document.all.ifream_text.....
参考网址:
http://www.iteye.com/topic/325588
http://lcb530.iteye.com/blog/417114
http://keyknight.blog.163.com/blog/static/36637840200973101612654/