好久没有写过js了,近日项目中,有个需求就是,新打开窗口页面,对于新窗口我总结以下2点
1.最基本的弹出窗口代码window.open()这个也相对简单,大家都调用过,建义大家用绝对路径(http://),以下是参数
window.open 弹出新窗口的命令;
‘page.html’ 弹出窗口的文件名;
‘newwindow’ 弹出窗口的名字(不是文件名),非必须,可用空”代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
用这个方法在浏览器中,基本都会被屏蔽,大家可以通过
var val = window.open(url),返回值来判断
if(!val){
这里表示被屏蔽了,没有成功,。大家可以在这里加个相对应的业务代码。我当时如果处理是如果屏蔽了,
用document.location.href=url内部跳转。
}
2、以上方法最基本的问题没有解决,就是屏蔽。所以告诉大家一个最完美window.open()不会
屏蔽的,道理很简单,就是建一个form.然后提交form,因为form可以在新窗口提高
给大家看看代码吧。
在你的页面里<form action=”" method=”get” target=”_blank” id=”tzForm” name=”tzForm”/>
<div id=”J_formStr”></div>
</form>
然后js
function openUrl(urlStr){
var pStr=”";
if(urlStr.indexOf(“?”)!= -1){
var str = urlStr.substr(urlStr.indexOf(“?”)+1,urlStr.length);
strs = str.split(“&”);
for(var i = 0; i < strs.length; i ++){
pStr=pStr+”<input type=’hidden’ name=’”+strs[i].split(“=”)[0]+”‘ value=’”+strs[i].split(“=”)[1]+”‘ />”;
}
}
document.getElementById(“J_formStr”).innerHTML=pStr;
document.tzForm.action=urlStr;
document.tzForm.submit();
}
大家可能会问,为什么还要这多代码。不就是一个提交表单。给大家说说原因吧
(1) 为什么用get,而不用post,在新窗口页面如果用post然后刷新。会有一个提交数据的对话框,所以才用get
(2)用get提交有个很关键的问题,如果你的url提交地址中有相对应的参数,打个比方,***.jsp?a=1&b=2在新窗口中
?a=1&b=2参数丢失掉。所以在上面有个pStr这个就是解析url中的参数,然后动态创建的表单元素,这样参数就不会丢失。