开发 Internet Explorer 右键功能表(ContextMenu)


Posted in Javascript onJuly 03, 2013

参考 MSDN Library【Adding Entries to the Standard Context Menu】开发 ContextMenu

1. IE 额外的 ContextMenu 是透过?册机码 HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt 来建立
2. 所以只要在该位置下新增一个 Key 值,例如:新增【Make 0rz】则 IE 中按下右键就会出现相同名称的功能

开发 Internet Explorer 右键功能表(ContextMenu)

开发 Internet Explorer 右键功能表(ContextMenu)

3. 如果我们想要在该功能上可以使用快捷键,就如同开发 Windows Form 一样,只要在英文名称前加上 & 符号即可。

例如:我们把 Key 值从【Make 0rz】改?椤?amp;Make 0rz】,则当 ContextMenu 出现按下 M 就是执行该项功能

4. 在该 Key 值底下,有一个重要键值是 Contexts,主要的功能是定义 ContextMenu 出现的时机

开发 Internet Explorer 右键功能表(ContextMenu)

包含:Default(预设载入)、Images(在图片上)、Control(任一控制项上)、Tables(在表格格上)、Text selection(纯文字反白选择时)、Anchor(在连结上)

如果 ContextMenu 要包含两种以上的出现时机,则将 value 自行做 logic or 计算再带入即可

例如:在本范例中,我们可以新增一个 DWORD 型态,名称 Contexts、值? 23 的键值。则表示该 ContextMenu 【预设载入】、【在连结上】、【在图片上】按下右键,就会出现【Make 0rz】的功能。

5. 另外还有 (Default) 这个键值,该键值填入的内容就是使用者执行 ContextMenu 功能时交给谁来处理,可能是 .html、.exe、.dll…. 等等。

例如本范例中,我想要呼叫 javascript 来执行功能,所以就填入【file://C:\Program Files\Make0rz.js】

开发 Internet Explorer 右键功能表(ContextMenu)

6. ??哟笾律希?退闶峭瓿稍]??C?的部份。我??透??作 .reg ?n案方便?使用者?磉M行安?,以下是本?例 RegMake0rz.reg ?n案:

 Windows Registry Editor Version 5.00  
 [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\&Make 0rz] 
@="file://C:\\Program Files\\Make0rz.js"  
"Contexts"=dword:00000023

 7. 以下是 Make0rz.js 的?热荩?/P>

  <script language="JavaScript" >    
  var obj = external.menuArguments.event.srcElement;
  var str = obj.tagName;
  if (str.toUpperCase() == 'A' || str.toUpperCase() == 'IMG') {
    if (str.toUpperCase() == 'A') {
      if (external.menuArguments.event.shiftKey) {
        str = obj.firstChild.nodeValue;
      }
      else {
        str = external.menuArguments.event.srcElement.href;
      }
    }
    else {
      str = external.menuArguments.event.srcElement.href;
    }
  }
  else {
    if (str.toUpperCase() != 'BODY') {
      str = obj.innerText;
      if (trim(str) == '') {
        str = external.menuArguments.location.href;
      }
    }
    else {
      str = external.menuArguments.location.href;
    }
  }  //// Preview
  //var url = 'http://0rz.tw/createget?redirect=1&url=' + encodeURIComponent(str);
  //var width = 600;
  //var height = 600;
  // NO Preview
  var url = 'http://0rz.tw/createget?redirect=0&url=' + encodeURIComponent(str);
  var width = 160;
  var height = 90;
  var left = (screen.width - width) / 2;
  var top = (screen.height - height) / 2;
  var cmd = 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left;
  cmd += ', directories=no, location=no, menubar=no, resizable=no, scrollbars=no, status=no, toolbar=no';
  newwin = window.open(url, 'windowname5', cmd);
  if (window.focus) {
    newwin.focus()
  }
  function trim(strValue) {
    var regL = /^[?@\s]+/;
    var regR = /[?@\s]+$/;
    strValue = strValue.replace(regL, "");
    strValue = strValue.replace(regR, "");
    return strValue;
  }   
  </script>
由於,在 Contexts 的 value 设定? 0x23,所以表示【预设载入】、【在连结上】、【在图片上】按下右键,就会出现【Make 0rz】的功能。
【预设载入】:在页面空白处,按下右键执行 ContextMenu 的【Make 0rz】,表示目前页面连结进行缩短网址。
【在连结上】:在文字连结上,按下右键执行 ContextMenu 的【Make 0rz】,表示该文字连结进行缩短网址。
【预设载入】:在图片连结或是图片上,按下右键执行 ContextMenu 的【Make 0rz】,表示图片位置进行缩短网址。

在 javascript 当中,利用 external.menuArguments.event,来判断使用者在何种时机按下右键并取得该元素
利用 external.menuArguments.event.srcElement.href 取得该元素的连结
利用 external.menuArguments.location.href 取得目前页面的连结

然后利用 window.open 来开? 0rz.tw 目标页面,来显是缩短网址后的结果。
如果是执行程式码的 30 ? 33 的话,表示有预览画面 (Preview);执行 35-38 则无预览画面。(可以依照需求自由调整)

8. 实际成果贴图:
(1) 在空白处,按下右键执行 ContextMenu 的【Make 0rz】,表示目前页面连结进行缩短网址。 (以 No Preview 功能呈现)

开发 Internet Explorer 右键功能表(ContextMenu)

http://tw.msn.com/?ocid=iehp => http://0rz.tw/KR9Hf

开发 Internet Explorer 右键功能表(ContextMenu)

(2) 在文字连结(新 闻)上,按下右键执行 ContextMenu 的【Make 0rz】,表示该文字连结进行缩短网址。(以 Preview 功能呈现)

开发 Internet Explorer 右键功能表(ContextMenu)

http://news.msn.com.tw/ => http://0rz.tw/7d2H6

开发 Internet Explorer 右键功能表(ContextMenu)

(3) 在图片连结或是图片上,按下右键执行 ContextMenu 的【Make 0rz】,表示图片位置进行缩短网址。

开发 Internet Explorer 右键功能表(ContextMenu)

http://sin.stb01.s-msn.com/i/53/79D3A7E9A23E21C6A510F09720CD2.jpg => http://0rz.tw/JlTDN

本功能范例可点此下载,压缩档案包含:RegMake0rz.reg ?册机码安装档、Make0rz.js 功能执行档、DelMake0rz.reg ?册机码反安装档

安装:执行 RegMake0rz.reg,自行将 Make0rz.js 放置於 C:\Program Files 目录下

反安装:执行 DelMake0rz.reg,自行将 C:\Program Files\Make0rz.js 档案删除

Javascript 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
javascript搜索框效果实现方法
May 14 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 #Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 #Javascript
一个封装js代码-----展开收起效果示例
Jul 03 #Javascript
jQuery中after的两种用法实例
Jul 03 #Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 #Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 #Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
回调函数的意义以及python实现实例
2017/06/20 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
自主招生自荐书
2013/11/29 职场文书
快递业务员岗位职责
2014/01/06 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
银行竞聘报告范文
2014/11/06 职场文书
法律意见书范文
2015/06/04 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
python 判断文件或文件夹是否存在
2022/03/18 Python