开发 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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
vue实现树形菜单效果
Mar 19 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
如何用threejs实现实时多边形折射
May 07 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自带的进位制之间的转换函数
2013/06/08 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
react+redux仿微信聊天界面
2019/06/21 Javascript
js实现计算器功能
2020/08/10 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python 功能和特点(新手必学)
2015/12/30 Python
全面理解Python中self的用法
2016/06/04 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python pandas库的安装和创建
2019/01/10 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
2014年乡镇工作总结
2014/11/21 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
学雷锋活动简报
2015/07/20 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
导游词之无锡梅园
2019/11/28 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS