开发 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 相关文章推荐
解密效果
Jun 23 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
原生js实现日期联动
Jan 12 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
vue计算属性及使用详解
Apr 02 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
js 图片懒加载的实现
Oct 21 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
星际RPG字典
2020/03/04 星际争霸
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
微信支付开发发货通知实例
2016/07/12 PHP
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
浅析Python中的多重继承
2015/04/28 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
如何在python中执行另一个py文件
2020/04/30 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
利用python汇总统计多张Excel
2020/09/22 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
工程索赔意向书
2014/08/30 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
辞职离别感言
2015/08/04 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书