2007年8月8日
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();
}