支持IE、Firefox的popupMenu

最新推荐文章于 2020-10-10 22:30:13 发布

dh20156

最新推荐文章于 2020-10-10 22:30:13 发布

阅读量2k

点赞数

分类专栏：技术文档文章标签： firefox ie function null iframe javascript

本文链接：https://blog.csdn.net/dh20156/article/details/1383424

版权

技术文档专栏收录该内容

57 篇文章 0 订阅

订阅专栏

dhLayer.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>支持IE、Firefox的popupMenu</title>
<script language="javascript" type="text/javascript" src="mozie/compatibility_moz.js"></script>
<style type="text/css">
html {width:100%;height:100%;margin:0px;}
body {width:100%;height:100%;min-height:100%;margin:0px;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//定义popupMenu类
function dhLayer(){
//author:dh20156
var dh = this;
this.content = null;
this.background = "buttonface";
this.border = null;
this.fontSize = "12px";
this.padding = "5px;"
this.cursor = "default";
//定义popupMenu方式
if(isMSIE){
  var layer = window.createPopup();
}else{
  var layer = document.createElement("DIV");
}
//popupMenu的显示方法，参数w-width(popupMenu宽),h-height(popupMenu高),o-parent Object(popupMenu的父对象)
this.show = function(w,h,o){
  if(isMSIE){
   var l = window.event.offsetX;
   var t = window.event.offsetY;
   layer.document.body.innerHTML = this.content;
   layer.document.body.oncontextmenu = function(){return false};
   layer.document.body.style.background = this.background;
   layer.document.body.style.border = this.border;
   layer.document.body.style.fontSize = this.fontSize;
   layer.document.body.style.padding = this.padding;
   layer.document.body.style.cursor = this.cursor;
   layer.show(l,t,w,h,o);
  }else{
   w = w+"px";
   h = h+"px";
   var l = window.event.clientX+"px";
   var t = window.event.clientY+"px";
   //应用IFRAME以遮蔽顶层对象
   var ifr = document.createElement("IFRAME");
   ifr.style.width = "100%";
   ifr.style.height = "100%";
   ifr.style.border = "none";
   ifr.style.zIndex = "97";
   ifr.style.position = "absolute";
   ifr.style.top = "0px";
   ifr.style.left = "0px;"
   //应用DIV以遮蔽IFRAME的右键
   var il = document.createElement("DIV");
   il.style.width = "100%";
   il.style.height = "100%";
   il.style.border = "none";
   il.style.zIndex = "98";
   il.style.position = "absolute";
   il.style.top = "0px";
   il.style.left = "0px;"
   layer.id = "dhLayer";
   layer.innerHTML = this.content;
   layer.style.background = this.background;
   layer.style.border = this.border;
   layer.style.fontSize = this.fontSize;
   layer.style.zIndex = "99";
   layer.style.width = w;
   layer.style.height = h;
   layer.style.position = "absolute";
   layer.style.left = l;
   layer.style.top = t;
   layer.style.padding = this.padding;
   layer.style.cursor = this.cursor;
   layer.appendChild(ifr);
   layer.appendChild(il);
   if(document.getElementById('dhLayer')!=null){
    o.replaceChild(layer,document.getElementById('dhLayer'));
   }else{
    o.appendChild(layer);
   }
  }
}
//popupMenu的隐藏方法
this.hide = function(){
  if(isMSIE){
   layer.hide();
  }else{
   layer.style.display = "none";
  }
}
try{
  layer.document.body.onclick = this.hide;
}catch(e){}
document.onclick = this.hide;
}
//对popupMenu的引用实例
function showMenu(){
var popMenu = new dhLayer();
popMenu.border = "1px solid buttonshadow";
popMenu.content = "test";
popMenu.show(160,100,document.body);
return false;
}
document.oncontextmenu = function(){return showMenu()};
</script>
覆盖SELECT对象：<br/><select><option value="test">try over this object ......       </option></select>
</body>
</html>

mozie/compatibility_moz.js

// ***********************************************************************************
/** Mozilla兼容MsIE脚本，window扩展部分。
* 作者 : FlashSoft
* o window.event
*/
(function () {
if (! window.Window) return;
/*
function _w_GET_event_ () {
  var mArg0;
  var fFunc = _w_GET_event_.caller;
  while(null != fFunc){
   mArg0 = fFunc.arguments[0];
   if(mArg0 && Event == mArg0.constructor)return mArg0;
   fFunc = fFunc.caller;
  }
  return null;
}
var _w = Window.prototype;
_w.__defineGetter__("event", _w_GET_event_);
*/
Window.constructor.prototype.__defineGetter__("event", function(){
  var o = arguments.callee.caller;
  var e;
  while(o != null){
   e = o.arguments[0];
   if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;
   o = o.caller;
  }
  return null;
});
})();