开发 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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
Vue的Options用法说明
Aug 14 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 和 MYSQL
2006/10/09 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python字符串str和字节数组相互转化方法
2017/03/18 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Django中URL的参数传递的实现
2019/08/04 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Shell如何接收变量输入
2012/09/24 面试题
语文高效课堂实施方案
2014/05/03 职场文书
债务纠纷委托书
2014/08/30 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
教师节主题班会教案
2015/08/17 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android