一篇关于javascript弹出窗口的文档(支持IE FF):
运行如图:IE下
火狐下:
因为项目中需要用到弹出窗口来展示数据,添加修改的模式也是弹出窗口。但是为了界面风格的统一,找了很多弹出窗口却源码都无从下手,甚至有的没有提供源码。之前接触到一款ui框架,qui是依据query的一个ui框架。它的弹出窗口做的非常好。所以在完成自己的弹出窗口的时候也参考了一些qui弹出窗口的设计。
切入正题吧:我这个弹出窗口也是从网上找的代码,但是被我改的面目全非了。(当然功能肯定比在网上找的多,兼容性也好多了,也处理了一些小bug)
下面我们看下弹出窗口源码:
var Sys = {};
var ua = https://www.wendangku.net/doc/da6927000.html,erAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//var event =
Sys.ie?window.event:arguments.callee.caller.arguments[0];
function Dialog(url, t, w, h,basePath,ind) {
//创建遮挡层
var mask = document.createElement("div");
if(ind==null||ind==''){
mask.id = "mask";
mask.style.cssText = "display:none;position:
absolute;top:0%;left:0%;width: 100%;height: 100%;background-color: black;z-index:999;-moz-opacity: 0.3;opacity:.30;filter:
alpha(opacity=40);";
}else{
mask.id = "mask"+ind;
mask.style.cssText = "display:none;position:
absolute;top:0%;left:0%;width: 100%;height: 100%;background-color: black;z-index:8889;-moz-opacity: 0.3;opacity:.30;filter:
alpha(opacity=40);";
}
document.body.appendChild(mask);
this.mask = mask;
//内容层
var massage_box = document.createElement("div");
if(ind==null||ind==''){
massage_box.id="massage_box";
}else{
massage_box.id="massage_box"+ind;
}
//massage_box.setAttribute("class", "white_content");
padding-bottom:25px;
//massage_box.style.cssText =
"height:"+h+"px;white;z-index:1002;margin:0
auto;margin-left:-415px!important;margin-top:-260px!important;left:50 %;top:50%;";
if(ind==null||ind=='')
massage_box.style.cssText = "display: inline;position: absolute;width:"+w+"px;height:"+(h+60)+"px;left:50%;top:50%;border:
3px solid #628bb7;background-color: white;z-index:8888;margin:0
auto;margin-left:-415px!important;margin-top:-260px!important;";
else
massage_box.style.cssText = "display: inline;position: absolute;width:"+w+"px;height:"+(h+60)+"px;left:50%;top:50%;border:
3px solid #628bb7;background-color: white;z-index:9999;margin:0
auto;margin-left:-415px!important;margin-top:-260px!important;";
document.body.appendChild(massage_box);
this.massage_box = massage_box;
this.pX = 0;
this.pY = 0;
var header = document.createElement("div");
header.innerHTML = "
//header.setAttribute("class", "useradd_title");
header.style.cssText =
"width:"+(w-2)+"px;margin:1px;height:49px;background:url("+basePath+" css/skins/blue/images/useradd_line.jpg) repeat-x left top;cursor: move;";
massage_box.appendChild(header);
this.header = header;
var title2 = document.createElement("div");
title2.style.cssText = "float:right;text-align: right; cursor: default; height: 40px;";
header.appendChild(title2);
this.title2 = title2;
var font1 = document.createElement("font");
font1.style.cssText = "font-size: 16px;";
title2.appendChild(font1);
this.font1 = font1;
var btnClose = document.createElement("img");
btnClose.src = basePath+"css/skins/blue/images/useradd_gb.png";
btnClose.style.cssText = "cursor:pointer;";
btnClose.width="23";
btnClose.heigth = "22";
font1.appendChild(btnClose);
this.btnClose = btnClose;
//--------------潜入 HTML -------------------//
//var beginQianru = document.createElement("div");
//beginQianru.style.cssText = "width:100%;height:30px;";
//massage_box.appendChild(beginQianru);
var iframeDiv = document.createElement("div");
iframeDiv.style.cssText =
"overflow-x:auto;white-space:nowrap;height:"+(h-50)+"px;";
massage_box.appendChild(iframeDiv);
if(ind==null||ind==''){
iframeDiv.innerHTML = iframeDiv.innerHTML + '';
}else{
iframeDiv.innerHTML = iframeDiv.innerHTML + '';
}
//设置按钮 OK确定 cancelButton取消 resetButton 重置
var buttons = document.createElement("div");
buttons.style.cssText = "overflow-x: auto; white-space: nowrap; height: 50px;"
massage_box.appendChild(buttons);
this.buttons = buttons;
//alert(document.getElementById('frame').document.body.innerHTML) ;
//计算有效高度
/*var frame = document.getElementById('frame');
var bHeight = frame.document.body.scrollHeight;
var dHeight = frame.document.documentElement.scrollHeight;
alert(bHeight+":"+frame.document.body.clientHeight);
var height = Math.max(bHeight, dHeight);
iframeDiv.innerHTML = '';
*/
//-------------事件绑定---------------
header.O = this;
header.onmousedown = function (e) {
e = e||window.event;
this.O.header.setCapture();
if (Sys.firefox){
this.O.pX = ((e.clientX/document.body.clientWidth)*100 - parseInt(this.O.massage_box.style.left))+"%";
this.O.pY = ((e.clientY/document.body.clientHeight)*100 - parseInt(this.O.massage_box.style.top))+"%";
}else{
this.O.pX = e.clientX - this.O.massage_box.style.pixelLeft;
this.O.pY = e.clientY - this.O.massage_box.style.pixelTop;
}
this.O.moving = true;
};
btnClose.O = this;
btnClose.onclick = function () {
this.O.close();
};
var div2 = document.createElement("div");
font1.style.cssText = "width:100%;height:30px;";
massage_box.appendChild(div2);
this.moveing = false;
if(ind==null||ind==''){
document.dialog = this;
header.onmouseup = function () {
if (document.dialog.moving) {
document.dialog.header.releaseCapture();
}
document.dialog.moving = false;
};
header.onmousemove = function (e) {
e = e||window.event;
if (document.dialog.moving) {
if (Sys.firefox){
document.dialog.massage_box.style.left =
((e.clientX/document.body.clientWidth)*100 -
parseInt(document.dialog.pX))+"%";
document.dialog.massage_box.style.top =
((e.clientY/document.body.clientHeight)*100 -
parseInt(document.dialog.pY))+"%";
}else{
document.dialog.massage_box.style.left = e.clientX - document.dialog.pX;
document.dialog.massage_box.style.top = e.clientY - document.dialog.pY;
}
}
};
}else{
document.dialog1 = this;
header.onmouseup = function () {
if (document.dialog1.moving) {
document.dialog1.header.releaseCapture();
}
document.dialog1.moving = false;
};
header.onmousemove = function (e) {
e = e||window.event;
if (document.dialog1.moving) {
if (Sys.firefox){
document.dialog1.massage_box.style.left =
((e.clientX/document.body.clientWidth)*100 -
parseInt(document.dialog1.pX))+"%";
document.dialog1.massage_box.style.top =
((e.clientY/document.body.clientHeight)*100 -
parseInt(document.dialog1.pY))+"%";
}else{
document.dialog1.massage_box.style.left = e.clientX - document.dialog1.pX;
document.dialog1.massage_box.style.top = e.clientY - document.dialog1.pY;
}
}
};
}
this.showButton = function(r,c,k,OKBeforMethod){
//取消
if(c){
var cancelButton = document.createElement("input");
cancelButton.setAttribute("type", "button");
cancelButton.setAttribute("value", "取消");
cancelButton.style.cssText =
"float:right;cursor:pointer;margin-top:15px;margin-right:30px;width:5 9px;height:24px;line-height:23px;font-size:12px;color:#fff;background :url("+basePath+"css/skins/blue/images/user_button.jpg) no-repeat left top;text-align:center;";
buttons.appendChild(cancelButton);
this.cancelButton = cancelButton;
cancelButton.O = this;
cancelButton.onclick = function () {
this.O.close();
};
}
//重置
if(r){
var resetButton = document.createElement("input");
resetButton.setAttribute("type", "button");
resetButton.setAttribute("value", "重置");
resetButton.style.cssText =
"float:right;cursor:pointer;margin-top:15px;margin-right:30px;width:5 9px;height:24px;line-height:23px;font-size:12px;color:#fff;background :url("+basePath+"css/skins/blue/images/user_button.jpg) no-repeat left top;text-align:center;";
buttons.appendChild(resetButton);
this.resetButton = resetButton;
resetButton.O = this;
resetButton.onclick = function () {
var frame ;
if(ind==null||ind==''){
frame =
document.getElementById("frame").contentWindow;
}else{
frame =
document.getElementById("frame"+ind).contentWindow;
}
if(frame.document.forms.length>0)
frame.document.forms[0].reset();
};
}
//确定
if(k){
var okButton = document.createElement("input");
if(ind==null||ind==''){
okButton.id = "_ButtonOK_0";
}else{
okButton.id = "_ButtonOK_0"+ind;
}
okButton.setAttribute("type", "button");
okButton.setAttribute("value", "确定");
okButton.style.cssText =
"float:right;cursor:pointer;margin-top:15px;margin-right:30px;width:5 9px;height:24px;line-height:23px;font-size:12px;color:#fff;background :url("+basePath+"css/skins/blue/images/user_button.jpg) no-repeat left top;text-align:center;";
this.buttons.appendChild(okButton);
this.okButton = okButton;
okButton.O = this;
okButton.onclick = function () {
if(OKBeforMethod != null && OKBeforMethod != ""){
if(ind==null||ind==''){
eval("document.getElementById('frame').contentWindow." + OKBeforMethod + ";");
}else{
eval("document.getElementById('frame"+ind+"').contentWindow" + OKBeforMethod + ";");
}
}
this.O.close();
};
}
};
this.show = function () {
if(ind==null||ind==''){
$("#massage_box").show();
$("#mask").show();
}else{
$("#massage_box"+ind).show();
$("#mask"+ind).show();
}
};
this.close = function () {
if(ind==null||ind==''){
$("#massage_box").remove();
$("#mask").remove();
}else{
$("#massage_box"+ind).remove();
$("#mask"+ind).remove();
}
//document.body.removeChild(this.massage_box);
//document.body.removeChild(this.mask);
};
}
我相信这个javascript类,并不难看懂,也不难进行修改。希望能方便大家使用和改进
源码解说:
1.为什么设置参数为(url, t, w, h,basePath,ind) ,我想前五个参数我们都
可以看懂是为什么,那么ind是为什么呢!我需要介绍一下,因为在我的系统里面需要在弹出窗口里面再弹出一个窗口。所以传入了ind来表示层数,当然这个ind参数不科学。也主要是我写这个还不够好,我的目的也是让其支持弹出无数层,互不影响。(当然后期我会去实现这个功能)
2. 为什么里面的样式不直接赋值为class,这样还方便了更换皮肤?其实我也是这
么想的。当时在IE8下面测试是好用的,可是在IE9下面使用class来赋值样式
不出来。所以在暂时没找到解决方法的时候我还是写行样式吧。
3. 为什么获取iframe 里面内容用
document.getElementById("frame").contentWindow; ,这个需要说明
在IE里面可以使用document.iframe[id] 就能获取到iframe对象,但是在
火狐里面不支持。之前看到一篇文章说:火狐不支持用id取到iframe对象,但
是支持 document.iframe[name]来获取到对象,这个方法我没试过。所以用
了document.getElementById(id).contentWindow 的公共方法来获取
iframe对象。
4. 为什么我在document下面根据 ind来区分分别申明了 dialog,dialog1 ;
这个原因也是弹出多个弹出窗口的时候用到的。后期可能会更改为使用集合来保
存弹出窗口对象,然后把对象挂在document下面。我想这样能够解决弹出多个弹
出窗口的问题。
5. 为什么在js中 document.dialog1.massage_box.style.left 要根据浏览
器来设置值;因为在style样式初始设置为 50%,Ie可以自动转变为像素,
而火狐不会。火狐在初始化的时候使用什么赋值方式,那么在动态赋值的时候也必
须使用那种方式赋值。所以在js中我在检查到是火狐就转为百分比来换算。否则
在火狐中弹出窗口不能拖动。
6. Js中用到了eval,eval是不安全的,大家可以想办法换一种方式调用或者执行,
谢谢帮助改进。
7. 在最后面用到了 jquery部分的东西,如果大家在使用的页面没有引入jquery,
那么请改为 javascript就可以了。
根据我写的这个弹出窗口我写了一个公共javascript文件:内容如下
//详细
function doView(url,title,width,height,basePath){
var dialog = new Dialog(url,title, width, height,basePath);
dialog.showButton(false,false,true);
dialog.show();
}
//修改
function
doGoModify(url,title,width,height,basePath,from,OKBeforMethod){ var dialog = new Dialog(url,title, width, height,basePath);
dialog.showButton(true,true,true,OKBeforMethod);
dialog.okButton.onclick=function(){
var framed = document.getElementById('frame').contentWindow;
var result =
eval("document.getElementById('frame').contentWindow."+ OKBeforMethod + ";");
if(result){
framed.document.getElementById(from).submit();
dialog.close();
window.location.reload(false);
}
};
dialog.show();
}
//添加
function doGoAdd(url,title,width,height,basePath,from,OKBeforMethod){ var dialog = new Dialog(url,title, width, height,basePath);
dialog.showButton(true,true,true,OKBeforMethod);
dialog.okButton.onclick=function(){
var framed = document.getElementById('frame').contentWindow;
var result =
eval("document.getElementById('frame').contentWindow."+ OKBeforMethod + ";");
if(result){
framed.document.getElementById(from).submit();
dialog.close();
window.location.reload(false);
}
};
dialog.show();
}
//打开一个 open页面选择一条数据返回 key 和 name 值并把 key 和name 值填充到对应的元素里面
//url : open页面打开连接地址
//title : open 页面标头
//width :页面宽度
//heigth:页面高度
//key_id : 返回key 需要填充的 id 如果不存在就不填充
//name_id :返回name 需要填充的 id 如果不存在就不填充(如果想带回多个值可以选择xx_xxx_xxx 形式传入参数)
//open_key :打开页面 key的 id
//open_name :打开页面 name 的id (如果想带回多个值可以选择 xx_xxx_xxx 形式赋值内容)
//method 回调函数(此传入的参数不要加入引号)
//methodhead 在点击确定的时候需要处理的方法函数此方法必须的open页面里面的函数(此参数需要加单引号)
//注意:返回值的内容由name_id决定个数,如果name_id的个数为2两个,而open_name
的内容为三个,那么第三个值将不会对页面进行赋值
//longyingan@https://www.wendangku.net/doc/da6927000.html, 2012.6.11
function doGetData(url,title,width,height,basePath,key_id,
name_id,open_key, open_name,methodend, methodhead){
var dialog = new Dialog(url,title, width, height,basePath);
dialog.showButton(true,false,true);
dialog.okButton.onclick=function(){
var framed = document.getElementById('frame').contentWindow;
if (methodhead != null && methodhead != "")
eval("document.getElementById('frame').contentWindow." + methodhead + "();");
var key = framed.document.getElementById(open_key).value;
var name = framed.document.getElementById(open_name).value;
var names = name_id.split("_");
if ($("#" + key_id) != null && $("#" + key_id) != '')
$("#" + key_id).val(key);
if (names.length > 1) {
var names_value = name.split("_");
for ( var i = 0; i < names.length; i++) {
if ($("#" + names[i]) != null && $("#" + names[i]) != '') {
$("#" + names[i]).val(names_value[i]);
$("#" + names[i]).blur();
}
}
} else {
var names_value = name.split("_");
if (names_value.length > 0) {
if ($("#" + name_id) != null && $("#" + name_id) != '') { $("#" + name_id).val(names_value[0]);
$("#" + name_id).blur();
}
}
}
if (methodend != null && methodend != "")
methodend();
dialog.close();
};
dialog.show();
}
//打开一个第二层 open页面选择一条数据返回 key 和 name 值并把 key 和name 值填充到对应的元素里面
//url : open页面打开连接地址
//title : open 页面标头
//width :页面宽度
//heigth:页面高度
//key_id : 返回key 需要填充的 id 如果不存在就不填充
//name_id :返回name 需要填充的 id 如果不存在就不填充(如果想带回多个值可以选择xx_xxx_xxx 形式传入参数)
//open_key :打开页面 key的 id
//open_name :打开页面 name 的id (如果想带回多个值可以选择 xx_xxx_xxx 形式赋值内容)
//method 回调函数(此传入的参数不要加入引号)
//methodhead 在点击确定的时候需要处理的方法函数此方法必须的open页面里面的函数(此参数需要加单引号)
//注意:返回值的内容由name_id决定个数,如果name_id的个数为2两个,而open_name
的内容为三个,那么第三个值将不会对页面进行赋值
//longyingan@https://www.wendangku.net/doc/da6927000.html, 2012.6.11
function doChildGetData(url,title,width,height,basePath,ind,key_id, name_id,open_key, open_name,methodend, methodhead){
var dialog = new Dialog(url,title, width, height,basePath,ind);
dialog.showButton(false,true,true);
dialog.okButton.onclick=function(){
var framed =
document.getElementById('frame'+ind).contentWindow;
if (methodhead != null && methodhead != "")
eval("document.getElementById('frame'"+ind+").contentWindow." + methodhead + "();");
var key = framed.document.getElementById(open_key).value;
var name = framed.document.getElementById(open_name).value;
var names = name_id.split("_");
var tempNames = document.getElementById('frame').contentWindow;
if (tempNames.document.getElementById(key_id) != null && tempNames.document.getElementById(key_id) != '')
tempNames.document.getElementById(key_id).value=key;
if (names.length > 1) {
var names_value = name.split("_");
for ( var i = 0; i < names.length; i++) {
if (tempNames.document.getElementById(names[i]) != null && tempNames.document.getElementById(names[i]) != '') {
tempNames.document.getElementById(names[i]).value=names_value[i];
tempNames.document.getElementById(names[i]).blur();
}
}
} else {
var names_value = name.split("_");
if (names_value.length > 0) {
if(tempNames.document.getElementById(name_id) != null&& tempNames.document.getElementById(name_id) != '') {
tempNames.document.getElementById(name_id).value=names_value[0];
tempNames.document.getElementById(name_id).blur();
}
}
}
if (methodend != null && methodend != "")
methodend();
dialog.close();
};
dialog.show();
}
function docheckForm(idform){
thisForm=document.getElementById(idform);
if(Validator.Validate(thisForm,2)){
return true ;
}
return false ;
}
Eg:使用实例
添加:
onclick="doGoAdd('moduleAction!addModuleInit','模块添加
',800,330,'<%=basePath%>','moduleform','docheckForm()')"
查看:
onclick="doView('moduleAction!viewModule?module.pkModule=${mdl.pkModule}','
模块查看',800,330,'<%=basePath%>')”
在列表页面我写到一个如下javascript函数这个函数是在弹出第二层弹出窗口的时
候调用的:
function doGetParentId(key_id, name_id,open_key, open_name){
doChildGetData('<%=basePath %>power/moduleAction!openParentModulePage ','选择父模块',800,650,'<%=basePath %>',2,key_id, name_id,open_key, open_name);
}
在添加页面有如下代码:
//提交表单
function docheckForm(){
var moduleName = document.getElementById("moduleName");
thisForm=document.getElementById("moduleform");
if(Validator.Validate(thisForm,2)){
return true;
}
return false ;
}
// 打开模块选择页面
function doOpenModulePage(){
window.parent.doGetParentId('parentPk','parentName','key','name');
}
在弹出的选择父模块页面有如下javascript函数方法:
changValue=function(key,name){
document.getElementById("key").value = key;
document.getElementById("name").value = name;
}
changValueAuto=function(){
var o = window.parent.document.getElementById("_ButtonOK_02");
if(o!=null&&o!="")
o.click();
}
关于具体使用方法,如有不明白的地方请发邮件到:
Longyingan@https://www.wendangku.net/doc/da6927000.html,文章拥有者:龙映安
国家公派出国留学管理信息平台 浏览器设置 国家留学基金管理委员会制 2017年4月
为保证数据准确性,请使用Internet Explorer(以下简称“IE”)浏览器进行评审。开始评审前请对IE浏览器进行以下设置。 一、启用“兼容性视图” 1)打开IE浏览器,点击菜单栏“工具”-->“兼容性视图设置”。 2)打开“兼容性视图设置”窗口,点击“添加”按钮,将https://www.wendangku.net/doc/da6927000.html,添 加至兼容性视图网站。 3)确认https://www.wendangku.net/doc/da6927000.html,已添加至兼容性视图网站,点击“关闭”按钮,完成
兼容性设置。 二、关闭“弹出窗口阻止程序” 1)打开IE浏览器,点击菜单栏“工具”-->“Internet选项”。 2)点击“隐私”按钮,进入IE浏览器安全性设置选项卡中。
3)去除“启用弹出窗口阻止程序”前面的勾,点击“确定”按钮,完成 设置。 三、安装“PDF文件阅读器” 建议安装AdobeReader10.0或以上版本PDF阅读器,安装完成后确认IE浏
览器“管理加载项”已启用。 1)打开IE浏览器,点击菜单栏“工具”-->“管理加载项”。 2)切换显示“未经许可运行”,确认加载项列表中有Adobe PDF Reader。 按照如上设置,如果申报人材料无法在IE浏览器中预览,可使用以下几种办法进行解决。 (1)关闭迅雷--浏览器下载响应 如果您安装了“迅雷”,请从设置中心中关闭“IE浏览器下载响应”。
(2)使用系统自带软件解决 如果您是“Windows10”操作系统,卸载Adobe Reader,使用系统自 带Microsoft Edge浏览器预览材料。 (3)安装其他PDF阅读器解决 安装“福昕PDF阅读器”,使用福昕阅读器预览材料。 (4)如果您是“Windows 64位”操作系统,请使用“C:\Program Files (x86)\Internet Explorer\iexplore.exe”32位版本IE浏览器进行 评审。 (5)以上方法都不能问题,请重置“IE浏览器” a)关掉ie浏览器(必须关闭)。 b)运行inetcpl.cpl命令,打开ie浏览器首选项。 c)切换至“高级”选项卡,删除个人设置,还原ie浏览器初始值。
Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发
主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后返回一个可打印的“!”字符,而keydown和keyup只是记录了shift + 1这个事件。[1] 但是keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress 事件的。 传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl 或Shift和一个按键一起按下,这通过事件的altKey、ctrlKey和shiftKey属性表示,这些属性在FireFox和IE中是通用的。 第二部分:兼容浏览器 凡是涉及浏览器的js,就都要考虑浏览器兼容的问题。 目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的,而FireFox和Opera是基于Mozilla内核的。 2.1 事件的初始化 首先需要了解的是如何初始化该事件,基本语句如下: function keyDown(){} document.onkeydown = keyDown; 当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数。 2.2 FireFox和Opera的实现方法 FireFox和Opera等程序实现要比IE麻烦,所以这里先描述一下。 keyDown()函数有一个隐藏的变量--一般的,我们使用字母“e”来表示这个变量。 function keyDown(e) 变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性: e.which
为什么我在点击法定代表人时,看不到弹出窗口? 可能是由于您使用了弹出窗口拦截功能,为了确保您在填写时能成功看到界面请您在选择的时候首先务必要关掉诸如3721、google等拦截弹出窗口软件。 怎样解除对弹出窗口的拦截? 首先,你得知道你的IE浏览器安装了哪一个阻止弹出窗口软件,以下你就可以很清楚的知道你的IE浏览器安装了哪一个软件工具。 (1).Windows XP SP2 中的IE的“弹出窗口阻止器”样式:(设置过程) IE浏览器的“工具”下拉菜单中有“弹出窗口阻止程序”一项,就说明你用的是SP2的IE浏览器 (2).雅虎助手的样式:(设置过程) (3).3721上网助手的样式:(设置过程) (4).MSN搜索工具栏的样式:(设置过程) (5).Google搜索工具栏的样式:(设置过程)
然后,在知道你的IE浏览器安装了哪一个软件工具后,就可以“对症下药”,下面就一个个告诉你如何阻止弹出窗口软件,让弹出的窗口继续弹出来。 (1).Windows XP SP2 中的IE的“弹出窗口阻止器”的设置过程: 1).打开 Internet Explorer。 2).在“工具”菜单中,指向“弹出窗口阻止器”,然后单击“关闭窗口阻止器设置”,然后再刷新页面就可以看到弹出窗口页面。 3).如果想要看到某个特定网站中的弹出窗口,可以在上图单击“弹出窗口阻止器设置”,请在“要允许的网站地址”框中键入该站点的地址(或 URL),然后单击“添加”。
“弹出窗口阻止器设置”窗口 (2).雅虎助手的设置过程: 1).打开 Internet Explorer。 2).在雅虎助手的工具栏上,看到“已拦截”按钮,点击它,可弹出下拉菜单窗口,点击“不拦截当前站点广告”,并把“拦截弹出广告”、“拦截浮动广告”、“拦截Flash广告”前面的钩都去掉(单击它就可以去掉),然后再刷新页面就可以看到弹出窗口页面。
JavaScript中按键事件的e.keyCodee.whiche.charCode 1、浏览器的按键事件 浏览器有3种按键事件——keydown,keypress和keyup,分别对应onkeydown、onkeypress和onkeyup3个事件句柄。 一个典型的按键会产生所有这三种事件,依次是keydown-->keypress-->keyup。[html]view plaincopyprint? 1. 2. 控制台输出: keydown keypress keyup 2、浏览器的兼容性
(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e,表示发生事件。 e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入:a 输出:按键码:97 字符:a (2)IE IE不需要e变量,window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint?
浏览器要求: 推荐IE10及以上、火狐、谷歌浏览器(建议使用推荐版本火狐浏览器:FirefoxEXR52.4.0) 一、注册 1、网址 2、注册:用户在系统首页点击: 注册,进入系统的企业注册页面,如下图所示: 需要注册原产地证的企业请勾选“原产地证申领”,需要注册货物申报的企业请勾选“货物申报”,需要报关的企业请勾选“报关申报。” 在企业注册页面,填入相关注册信息(黄色文本框为必填字段),包括“单位中文名称”、“用户名”、“组织机构代码”(已“多证合一”用户,取18位“统一社会信用代码”的第9-17位)、“联系人”等,点击按钮,进入账号审核阶段(注册账号由系统管理员进行审核,审核时间一般是3-5个工作日。 注册页面中的信城通账号和密码,如果企业已经有此信息的话,可以自行填入;如果企业无此信息可以不填,由江苏电子口岸单一窗口统一向信城通公司申请填写。
3.审批状态查询:在首页点击按钮,输入注册时设置的用户名和密码,点击查询按钮,可以查看注册用户是否审核通过,如下图所示: 另外还可以通过该页面上的修改键,修改审批不通过或者待审核的数据。(按照回执修改好注册信息后,请重新录入密码,再点击提交。) 审核通过后,方可登录系统。 二、登录 进入系统首页,选择“原产地证申报模块”,点击子菜单“检验检疫原产地证申报”,如下图: 首次使用的话,有些浏览器要设置“允许弹出窗口”。 验证成功,弹出如下窗口:
验证失败的话,出现下图的错误: 江苏国际贸易原产地证交流群:271847377,客服电话:025-96080 【基础信息维护】: 产地证默认信息维护:在此页面可以做相应产地证常用数据的维护,类似产地证录入模板的功能。(此功能只针对自理申报企业) 产地证代录入企业客户信息维护:(此功能只针对代理申报企业) 三、申报单录入 点击要申报的产地证类型,进入对应的产地证列表页面,如下图:
我的记录(JavaScript事件)JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。 二、事件冒泡有什么作用 (1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】