iframe使用心得

wangzjie

浏览: 72770 次
性别:
来自: 北京

最近访客更多访客>>

ZHAO_Beer

qq_23565683

xuexixuexi993

kissycz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

框架 JSP 设计模式 HTML JavaScript

内框架Iframe的使用

使用Iframe可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果。

现在我们学一下Iframe标记的使用。

Iframe标记的使用格式是:

Java代码

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>

比如:

Java代码

<Iframe src="http://campo.3322.net" width="250" height="200" scrolling="Auto" frameborder="0" name="main"></iframe>

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。

IFrame也可以编辑文字

有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。

Java代码

<html>
<body onload="editer.document.designMode='On'">
<IFrame ID="editer"></IFrame>
</body>
</html>

其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！
只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。

Java代码

<html>
<body onload="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的内容