当前位置: 代码迷 >> Web前端 >> 更改地址栏前小图标、按上回车键事件、关闭窗口
  详细解决方案

更改地址栏前小图标、按上回车键事件、关闭窗口

热度:99   发布时间:2012-11-01 11:11:31.0
更改地址栏前小图标、按下回车键事件、关闭窗口
<!-- 地址栏前添加自定义小图标16*16 -->
<link rel="shortcut icon" href="favicon.ico" />
需要将favicon.ico图片放在WebRoot/favicon.ico目录下;

按下回车键的事件
document.onkeydown = function(e){
	var ev = e || window.event;
	if(ev.keyCode==13||ev.which==13){
	    //这里是按下回车键的事件
	}
}

function closeWin(){//关闭窗口
    window.opener = null;
    window.open('','_self');
    window.close();
}
注意:window.close()方法讲解:
    对于用js代码打开的窗口,是没有关闭提示信息的;
    但是对于原生窗口(即你直接打开的窗口),就会有提示信息,此时想没有提示信息,做法是:
    window.opener = null;
    window.open('','_self');
    window.close();

在firefox中,window.close()默认不能关闭用户直接打开的窗口(firefox中对于直接打开的窗口window.close是无效的)。

有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe);
self是当前窗口,自引用属性,是对当前window对象的引用,与window属性同义.
opener是对打开当前窗口的window对象的引用,如果当前窗口被用户打开,则它的值为null.

open动作完成后将opener设置为空,也就是window.opener=null,但是那也没说它有关闭窗口时不提示这么个用法啊。子窗口(通过js生成的窗口)是不需要把window.opener设置为空也可以无提示自动关闭的,但父窗口(原生窗口)必须有这一句。关于window.opener在无提示关闭窗口的作用,是不是可以这么解释:浏览器认为子窗口与父窗口的优先级是不同的,子窗口可以随意关闭而父窗口可能有比较重要的内容而需要用户同意才可以关闭;当window.opener=null的时候,父窗口失去了原来的优先级,被浏览器认为是一个普通的窗口,所以可以象子窗口一样不需要提示而自动关闭了。

iframe自适应实现的一种方式:
<div id="main" style="height:500px;width:998px;">
      <iframe name="mainFrame" id="mainFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>
总结:
1.iframe设置:width为100%  height为100%;
2.外层div用px控制(实际控制的是div,通过控制div,由于里面iframe宽与高都是100%,所以iframe会自适应的);
也就是说,在实际的控制中,只要控制外层div的高与宽就行了,里面的iframe会随着外层div高宽的改变而自适应改变。
注意:在除ie6以外的其它浏览器中这样处理是可以的,但是ie6中不仅要控制外层div的高宽,还要控制iframe的高宽。下面是相关关键代码:
/**
 * iframe高度自适应
 * @param iframeObj :iframe DOM对象
 * @param divObj : div DOM对象
 * @return 设置的高度
 */
function iframeAdapt(iframeObj, divObj){
	var bHeight = iframeObj.contentWindow.document.body.scrollHeight;
	var dHeight = iframeObj.contentWindow.document.documentElement.scrollHeight;
	var height = Math.min(bHeight, dHeight);
	if(height==0){
		height = Math.max(bHeight, dHeight);
	}
	if(navigator.userAgent.indexOf("MSIE 6.0")>0){//IE6下还要控制iframe的高宽
		iframeObj.style.height = height + 'px';
	}
	divObj.style.height = height + 'px';
	return height;
}
/**
 * 检查iframe是否加载完成
 */
function checkIframeComplete(){
	var state = null;
	//如果有多层次的iframe嵌套,只要检查最外层的iframe是否加载完成就行了
	//最外层的iframe加载完成了,则里面的iframe也一定加载完成了!
	var ifrObj = window.top.window.document.getElementById('iframeId');
	if(ifrObj.contentWindow.document.readyState){
		try{
			state = ifrObj.contentWindow.document.readyState;
		}catch(e){
			state = null;
		}
		if(state == "complete" || !state){// loading,interactive,complete
			doXXX(); //这里是iframe加载完成后 要执行的操作
			return;
		}
		window.setTimeout(function(){ //定时检查
			checkIframeComplete();
		}, 10);
	}
}


利用iframe来做无刷新上传
要实现文件上传,form必须设置几个属性:
1.action:设为要处理数据的页面地址;
2.method:设为"post";
3.enctype/encoding:必须设为"multipart/form-data",这里要注意的是在ie中用js修改form的enctype属性是没有效果的,只能修改encoding;
4.把form的target设为iframe的name;
iframe实现无刷新上传的原理:利用form的target属性,把数据提交到页面中一个(通常为隐藏的)iframe上。直观点说就是把“刷新”留给iframe。
其实原理跟一般用iframe实现无刷新提交表单是一样的,只是这里换成是文件。
这里关键就是把form的target设为iframe的name

FORM元素的enctype属性指定了表单数据向服务器提交时所采用的编码类型,默认的缺省值是“application/x-www-form-urlencoded”。
然而,在向服务器发送大量的文本、包含非ASCII字符的文本或二进制数据时这种编码方式效率很低。
在文件上传时,所使用的编码类型应当是“multipart/form-data”,它既可以发送文本数据,也支持二进制数据上载。
Browser端<form>表单的ENCTYPE属性值为multipart/form-data,它告诉我们传输的数据要用到多媒体传输协议,由于多媒体传输的都是大量的数据,所以规定上传文件必须是post方法,<input>的type属性必须是file

前后台传递参数常用的方式
前后台传递参数常用的方式有四种:form.submit()提交方式、a标签href方式、iframe.src提交方式、ajax提交方式;
form提交方式:
<form id="searchForm" action="${_ctPath}/xxx_list.do" method="post">
<input type="text" name="inboxDto.sendNum" value="${inboxDto.sendNum}"/>
<input type="text" name="dddd" value="${dddd}"/>
<input type="text" name="inboxDto.startTime" value="<fmt:formatDate value="${inboxDto.startTime}" type="both" pattern="yyyy-MM-dd"/>"/>
<a href="javascript:document.getElementById('searchForm').submit();">提交</a>
</form>

a标签href方式:
<a href="${_ctPath}/xxx_list.do">
如果传参可以这样:<a href="${_ctPath}/xxx_list.do?inboxDto.sendNum=111&dddd=2222">

iframe.src提交方式:
var ifrObj = document.getElementById(iframeId);
ifrObj.src = "${_ctPath}/xxx_list.do";
如果传参可以这样:ifrObj.src = "${_ctPath}/xxx_list.do?inboxDto.sendNum=111&dddd=2222";

ajax提交方式:
用我封装的ajax工具类发送请求,其中data配置如下:
data:"inboxDto.sendNum=111&dddd=2222"

相同点:
1.都可以通过request.getParameter获取
2.都可以将参数封装为dto对象
在后台请求处理方法中的测试代码,运行结果证明:可以获取数据。
System.out.println(request.getParameter("inboxDto.sendNum"));
System.out.println(request.getParameter("dddd"));
System.out.println(inboxDto.getSendNum());

不同点:
在struts2中,不同方式的请求提交到struts2的处理方法时,当return一个逻辑页面时,例如:
public String list(){
    //something to do...
    return "xxx_list";
}
form与a方式时,form标签与a标签所在的页面可以正常跳转到逻辑页面;
iframe.src方式时,该iframe可以正常跳转到逻辑页面;
ajax方式时,失效,不行(1.可能行,但是我还没有找到解决方法;2.此时ajax返回的结果rs是要跳转的页面)
  相关解决方案