2007年1月12日
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>