开发 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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jQuery构造函数init参数分析
May 13 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
canvas的神奇用法
Feb 03 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP自定义错误用法示例
2016/09/28 PHP
繁简字转换功能
2006/07/19 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
VUE中的无限循环代码解析
2017/09/22 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Django框架 querySet功能解析
2019/09/04 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python 如何引入协程和原理分析
2020/11/30 Python
Python操作Excel的学习笔记
2021/02/18 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
税务会计岗位职责
2014/02/18 职场文书
个人课题方案
2014/05/08 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
化学专业自荐信
2014/05/28 职场文书
导游词之太原天龙山
2020/01/02 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫