2006年10月9日
1.index.html
<iframe id="mainIframe" scrolling="no" frameborder="0" width="100%" src="a.html"></iframe>
<a href="#" onclick="page('a.html')">a頁面</a><a href="#" onclick="page('b.html')">b頁面</a>
2 a.html //內嵌頁面
<script language="javascript">
changeHight();
</script>
3. b.html //內嵌頁面
<script language="javascript">
changeHight();
</script>
4. page.js
function changeHight(){
var iFrm = parent.document.getElementById("mainIframe");
var subWeb = iFrm.contentDocument;
if(subWeb){
if (subWeb.body.scrollHeight>480)
iFrm.height = subWeb.body.scrollHeight+20;
else
iFrm.height=500;
}
if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight!="0"){
parent.document.getElementById("mainIframe").style.height=window.document.body.scrollHeight;
}
if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight=="0"){
parent.document.getElementById("mainIframe").style.height=500;
}
}
function page(page){
document.getElementById("mainIframe").src=page;
}
造成IE,FireFox,Opera中Iframe顯示差異原因在于
1.iframe在FireFox中取法為parent.document.getElementById("mainIframe").contentDocument,而在ie,opera中為parent.document.getElementById("mainIframe").document
2.當頁面無滾動時，window.document.body.scrollHeight在IE中能取到，fireFox和Opera中取不到。
摘要: 1.myapp/index.html
<html>
<head>
文件操作
<iframe id="iframefile" scrolling="no" frameborder="0" width="100%" src="/myapp/fileUpload.jsp"></iframe>
&l...
閱讀全文
一些頻繁使用的javascript頁面控制，做個總結。
下面是部分代碼。
<html>
<head>
<script language="javascript">
function a(){
window.document.getElementsByName("dx")[0].checked=true;
}
function b(){
window.document.getElementsByName("dx")[0].checked=false;
}
function c(){
window.document.getElementsByName("fx")[0].checked=true;
}
function d(){
window.document.getElementsByName("fx")[0].checked=false;
}
function e(){
for(i=0;i<window.document.getElementsByName("fx").length;i++){
if(!window.document.getElementsByName("fx")[i].checked){
window.document.getElementsByName("fx")[i].checked=true;
}
}
}
function f(){
for(i=0;i<window.document.getElementsByName("fx").length;i++){
if(window.document.getElementsByName("fx")[i].checked){
window.document.getElementsByName("fx")[i].checked=false;
}
}
}
function g(){
window.document.getElementById("lbka")[1].selected=true;
}
function h(){
alert("選擇號為:"+window.document.getElementById("lbka").selectedIndex + " 值為:" +window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].value+" 文本值為:" + window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].text);
}
function m(){
sel = false;
var val="";
for(i=0;i<window.document.getElementsByName("dx").length;i++){
if(window.document.getElementsByName("dx")[i].checked){
val = window.document.getElementsByName("dx")[i].value;
sel=true;
break;
}
}
if(sel){
alert("單選值為:"+val);
}else{
alert("請選擇文件");
return false;
}
}
function j(){
var sel = false;
var val="";
for(i=0;i<window.document.getElementsByName("fx").length;i++){
if(window.document.getElementsByName("fx")[i].checked){
if(val==""){
val=window.document.getElementsByName("fx")[i].value;
}else{
val = val + "," +window.document.getElementsByName("fx")[i].value;
}
}
}
if(val==""){
alert("請選擇文件");
return false;
}else{
alert("復選值為:"+val);
}
}
</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>文件</td>
<td>列表框</td>
<td>單選</td>
<td>復選</td>
</tr>
<tr>
<td>文件A</td>
<td><select name="lbka"><option value="lbka1">文件A1</option><option value="lbka2">文件A2</option></select></td>
<td><input type="radio" name="dx" value="dxa"></td>
<td><input type="checkbox" name="fx" value="fxa"></td>
</tr>
<tr>
<td>文件B</td>
<td><select name="lbkb"><option value="lbkb1">文件B1</option><option value="lbkb2">文件B2</option></select></td>
<td><input type="radio" name="dx" value="dxb"></td>
<td><input type="checkbox" name="fx" value="fxb"></td>
</tr>
<tr>
<td colspan="4">
<a href="#" onclick="a();">單選A選中</a>
<a href="#" onclick="b();">單選A不選中</a>
<a href="#" onclick="c();">復選A選中</a>
<a href="#" onclick="d();">復選A不選中</a>
<a href="#" onclick="e();">復選全選</a>
<a href="#" onclick="f();">復選全不選</a>
<a href="#" onclick="g();">選中列表框文件A2</a>
<a href="#" onclick="h();">取得選中列表框A的值,文本</a>
<a href="#" onclick="m();">判斷單選選擇</a>
<a href="#" onclick="j();">判斷復選選擇</a>
</td>
</tr>
</table>
</body>
</html>
主要通過javascript實現，理解IE的DOM結構，并調用元素的固定方法，可以實現表單元素的動態增刪。
下面是部分代碼。
<html>
<head>
<script language="javascript">
function add(){
//取得表格
var table = document.getElementById("table1");
//取得行數;
var num = table.rows.length;
//增加一行
var newrow1 = table.insertRow(num-1);
var cell1 = newrow1.insertCell();
var cell2 = newrow1.insertCell();
var cell3 = newrow1.insertCell();
var cell4 = newrow1.insertCell();
//增加行元素
var inputcell2 = document.createElement("<input size='32' name=''>");
cell2.appendChild(inputcell2);
var inputcell4_1 = document.createElement("<input size='32' name=''>");
var inputcell4_2 = document.createElement("<input type='button' value='刪除元素'onClick='del(this);'/>");
cell4.appendChild(inputcell4_1);
cell4.appendChild(inputcell4_2);
//刷新標簽顯示
frash();
}
function del(obj){
//取得按鈕所在行
var i = obj.parentNode.parentNode.rowIndex;
var tab = document.getElementById("table1");
//刪除按鈕所在行
tab.deleteRow(i-1);
frash();
}
function frash(){
var table = document.getElementById("table1");
var num = table.rows.length;
//計算動態元素個數
var n = num-2;
for(i=1;i<=n;i++){
//設置標簽值
table.rows[i].cells[0].innerText="元素"+i+"屬性A";
//設置屬性值
table.rows[i].cells[1].childNodes[0].setAttribute("name","ysa"+i);
table.rows[i].cells[2].innerText="元素"+i+"屬性B";
table.rows[i].cells[3].childNodes[0].setAttribute("name","ysb"+i);
}
}
</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>標簽1</td>
<td><input name="a"></td>
<td>標簽2</td>
<td><input name="b"></td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#" onclick="add();">增加元素</a></td>
</tr>
</table>
</body>
</html>
頁面打印通常直接調用IE中打印命令，并通過class控制打印范圍。當頁面文件內容過多，無法完整打印時，可以通過javascript控制縮放實現完整打印。
下面是部分代碼。
<
html>
<head>
<title>***上海市眼病防治中心病人結帳費用報表***</title>
<meta http-equiv="Content-Type" content="text/
html; charset=gb2312">
<!--media=print 這個屬性可以在打印時有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
<style>
body,td,th
{
font-size: 12px;
}
.tdp
{
border-bottom: 1 solid #000000;
border-left: 1 solid #000000;
border-right: 0 solid #ffffff;
border-top: 0 solid #ffffff;
}
.tabp
{
border-color: #000000;
border-collapse:collapse;
}
.NOPRINT {
font-family: "宋體";
font-size: 12px;
}
</style>
<script language="javascript">
var i=0;
function zoomL(){
i++;
document.getElementById("f").style.zoom=1+i/3;
}
function zoomS(){
i--;
document.getElementById("f").style.zoom=1+i/3;
}
</script>
</head>
<body >
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 V
IEWASTEXT> </OBJECT>
<input type=button value=打印 onclick="document.all.WebBrowser.ExecWB(6,1)" class="NOPRINT">
<input type=button value=直接打印 onclick="document.all.WebBrowser.ExecWB(6,6)" class="NOPRINT">
<input type=button value=頁面設置 onclick="document.all.WebBrowser.ExecWB(8,1)" class="NOPRINT">
<input type=button value=打印預覽 onclick="document.all.WebBrowser.ExecWB(7,1)" class="NOPRINT">
<input type=button value=放大 onclick="zoomL();" class="NOPRINT">
<input type=button value=縮小 onclick="zoomS();" class="NOPRINT">
<br/>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="5"><font size="3">上海市眼病防治中心病人結帳費用報表（A） </font></td>
</tr>
<tr>
<td>匯總人次 5</td>
<td>費用合計 15853.12</td>
<td>統計日期 </td>
<td>制表人 023</td>
<td>制表日期：2004-05-13</td>
</tr>
</table>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp" id="f">
<tr>
<td >姓名</td>
<td >住院號</td>
<td >科室</td>
<td >結帳日期</td>
<td >出院日期</td>
<td >費用合計</td>
<td >醫保交易費用</td>
<td >分類給付費用</td>
<td >非醫保交易費</td>
</tr>
<tr>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
</table>
<hr align="center" width="90%" size="1" n
oshade class="NOPRINT" >
<!--分頁-->
<div class="PageNext"></div>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp">
<tr>
<td >第2頁</td>
</tr>
<tr>
<td >看到分頁了吧</td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" >這樣的報表
對一般的要求就夠了。</td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<table width="780%" border="1" class="Noprint">
<tr>
<td>能不能打印</td>
</tr>
</table>
</body>
</
html>
思路是把表單類型設置為enctype="multipart/form-data"，其他表單中文本數據通過javascript處理，附加在action后面，后臺通過request.getParameter()取得。上傳文件調用commons-fileupload.jar中方法。
下面是部分代碼。
<form name="ajform" action="/da.do" method="post" enctype="multipart/form-data">
<tr><td><input name="a" value=""></td></tr>
<tr><td><input name="b" type="file"></td></tr>
<tr><td><a href="#" onclick="checksubmit();">提交</a></td></tr>
</form>
<script language="javascript">
function checksubmit(){
var value = "/da.do?formAction=save";
value = value+"&a="+ window.document.getElementById("a").value;
window.document.ajform.action=value;
window.document.ajform.submit();
}
</script>
String a = request.getParameter("a");
try {
//文件上傳目錄“/file/wj”
String filepath= request.getSession().getServletContext().getRealPath("/")+"file"+File.separator+"wj";
//文件上傳臨時目錄“/file/temp”
String tempPath = request.getSession().getServletContext().getRealPath("/")+"file"+File.separator+"temp";
File dir = new File(filepath);
//建立目錄
if(!dir.exists()){
dir.mkdirs();
}
File dir1 = new File(tempPath);
if(!dir1.exists()){
dir1.mkdirs();
}
DiskFileUpload fu = new DiskFileUpload();
//設置最大文件尺寸，這里是10MB
fu.setSizeMax(10485760);
//設置緩沖區大小，這里是4kb
fu.setSizeThreshold(4096);
//設置臨時目錄：
fu.setRepositoryPath(tempPath);
List fileItems = fu.parseRequest(request);
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
String fileName = item.getName();
//判斷是否為文件
if(fileName!=null){
//取文件名
String name = fileName.substring(fileName.lastIndexOf(File.separator)+1);
if(fileName!=null&& !fileName.equals("")) {
File file = new File(filepath+File.separator+name);
//上傳文件
item.write(file);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
<html>
<head>
</head>
<body>
<embed height=240 name=aa style="BORDER-BOTTOM:#2a8a21 3px solid;BORDER-LEFT:#2a8a21 3px ?solid;BORDER-RIGHT:#2a8a21 3px solid;BORDER-TOP:#2a8a21 3px solid"
?type=audio/x-pn-realaudio-plugin width=320 loop="no" console="clip1" reset="false"
?controls="ImageWindow" src="a1.rmvb">
</embed><br>
<embed height=30 type=audio/x-pn-realaudio-plugin width=320? console="clip1"? reset="false" autostart="false" controls="controlpanel">
</embed><br>
<embed height=30 type=audio/x-pn-realaudio-plugin width=320? console="clip1"? reset="false" autostart="false" controls="statusbar">
</embed><br>
<Script Language=JavaScript>
function OpenFile(txt){
?document.aa.src=txt.value;
}
</Script>
</body>
</html>
1。EJB打包
<?xml version="1.0"?>
<project name="jartest" default="jar" basedir=".">
<property name="build.dir" value="${basedir}/build" />
<property name="build.classes.dir" value="${build.dir}/classes" />
<target name="jar" description="打包成Jar">
<jar jarfile="${basedir}/ejbfile.jar">
<fileset dir="${build.classes.dir}">
<include name="**/*.class" />
</fileset>
<metainf dir="${basedir}/META-INF ">
<include name="**" />
</metainf>
</jar>
</target>
</project>
2。web應用打包
<?xml version="1.0"?>
<project name="wartest" default="war" basedir=".">
<target name="war" description="創建WEB發布包">
<war warfile="${basedir}/EJBTest.war" webxml="${basedir}/WEB-INF/web.xml">
<fileset dir="${basedir}">
<include name="**"/>
<exclude name="build.xml" />
<exclude name="/WEB-INF/web.xml" />
</fileset>
</war>
</target>
</project>
1.web.xml中配置Spring的servlet和servlet-mapping
???<servlet>
??????? <servlet-name>example</servlet-name>
??????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
????????<init-param>?
????????????<param-name>contextConfigLocation</param-name>?
????????????<param-value>/WEB-INF/application-servlet.xml</param-value>?
????????</init-param>?
????????<load-on-startup>1</load-on-startup>
??? </servlet>
??? <servlet-mapping>
??????? <servlet-name>example</servlet-name>
??????? <url-pattern>*.do</url-pattern>
??? </servlet-mapping>
2.配置spring配置文件application-servlet.xml
???<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
?????<property name="prefix">
?????????<value>/page/</value>
?????</property>
?????<property name="suffix">
?????????<value>.jsp</value>
?????</property>
???</bean>
???<bean id="urlMapping"?class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
????????<property name="mappings">
????????????<props>
????????????????<prop key="/login.do">loginAction</prop>
????????????</props>
????????</property>
???</bean>
???<bean id="loginAction" class="loginAction">
????????<property name="commandClass">
????????????<value>?LoginActionVo??</value>
????????</property>
????????<property name="formView">
????????????<value>login</value>
????????</property>
????????<property name="sessionForm">
????????????<value>true</value>
????????</property>
????????<property name="serviceLocator">
????????????<ref bean="servicelocator" />
????????</property>
?</bean>
3.新建類繼承SimpleFormController﹐並複寫protected Object formBackingObject(HttpServletRequest request)?和?protected ModelAndView onSubmit(HttpServletRequest request,?HttpServletResponse response,
?Object cmd, BindException ex)。常用結構為
???protected Object formBackingObject(HttpServletRequest request){
??????LoginActionVo??loginActionVo?? = new LoginActionVo?();
??????request.setAttribute("?loginActionVo",?loginActionVo);
??????return loginActionVo;
???}
???protected ModelAndView onSubmit(HttpServletRequest request,?HttpServletResponse response,
???????Object cmd, BindException ex){
??????LoginActionVo??loginActionVo =(LoginActionVo)cmd;
??????Map map = new HashMap();
?????map.put("?loginActionVo",?loginActionVo);
?????request.getSession().setAttribute(this.getFormSessionAttributeName(),?loginActionVo);
?????return new ModelAndView("login",map);
? }
4.將jsp頁面參數和VO進行綁定。綁定的方法為頁面元素name和VO對象對應﹐當進行深層次的綁定時﹐要注意﹐在變量的get方法中進行初始化。在servlet2.4容器中可以不用c:out標籤
輸入框綁定﹕<input name="user.name"? value = "<c:out value="${loginActionVo.user.name}"/>" type="text" disabled="disabled"? size="14" maxlength="14" /></td>
VO為﹕
?public class loginActionVo{
????private User user;
????public?User getUser(User user){
??????if( user == null){
?????????user = new User();
??????}
??????return user;
???}
?}
???