嵌入页面的客户端的右键菜单的实现方法和装置制造方法
【专利摘要】本发明适用于浏览器领域，公开了一种嵌入页面的客户端的右键菜单的实现方法和装置，该方法包括：在浏览器引擎中注册右键单击的监听事件；如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息；根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单；根据所述右键单击事件的位置信息显示所述右键菜单。通过在页面中存储与客户端控件相应的右键菜单，根据右键单击事件对应的控件查找相应的右键菜单，从而实现对客户端各控件显示相应的右键菜单，使得嵌入页面的客户端操作更为方便。
【专利说明】嵌入页面的客户端的右键菜单的实现方法和装置
【技术领域】
[0001]本发明属于浏览器领域，尤其涉及嵌入页面的客户端的右键菜单的实现方法和装置。
【背景技术】
[0002]Windows图形界面的出现，改变了人们使用电脑的方式。如在客户端或者网页等程序的操作过程中，通过鼠标或者触摸手势对图形进行操作的方式，实现了更为简单方便的人机交互。用户可以控制鼠标的光标在显示界面上移动，点击鼠标左键激活显示界面上的操作对象完成操作，或者是在界面的操作对象上点击鼠标右键，通过弹出的右键菜单，可提供多种选择操作指令执行相应的操作，使得操作更加方便。
[0003]随着技术的发展，传统的大客户端向小型化发展，出现了内嵌于网页中的瘦客户端，其通过将其鼠标、键盘等输入传送到服务器处理，服务器再把处理结果回传至客户端显示，可以大大减轻客户端设备的计算量。然而，现有的浏览器的页面的右键菜单，一般如图1所示，浏览器在接收到右键点击指令后，根据点击对象的属性信息，调用浏览器中设定的右键菜单，并将该菜单信息在页面中显示。使用这种方法可以较好的提高浏览器内页面的操作的便利性。但是，对于嵌入页面的瘦客户端来说，往往需要更为具体的操作指令，现有的通常做法是通过页面中的菜单按钮接收触发指令，由于不同的对象所需要的具体操作不尽相同，不能针对具体的对象展现出的相应的操作菜单，而且其操作较为麻烦。
【发明内容】
[0004]本发明实施例的目的在于提供一种嵌入页面的客户端的右键菜单的实现方法和装置，以解决现有技术中的嵌入页面的客户端不能针对具体的对象展现出相应的操作菜单，而且其操作较为麻烦的问题。
[0005]本发明的进一步目的在于，提供一种能够快速查找操作控件所对应的右键菜单的嵌入页面的客户端的右键菜单的实现方法和装置。
[0006]本发明实施例是这样实现的，一种嵌入页面的客户端的右键菜单的实现方法，所述方法包括:
[0007]在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件；
[0008]如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息；
[0009]根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单；
[0010]根据所述右键单击事件的位置信息显示所述右键菜单。
[0011]为实现本发明的进一步目的，所述获取所述右键单击事件所对应的客户端的控件包括:
[0012]获取客户端所在页面所对应的DOM树，所述DOM树包括多个节点；
[0013]查找所述右击事件所对应的控件所对应的DOM树中的节点的位置；
[0014]判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。
[0015]本发明实施例的另一目的在于提供一种嵌入页面的客户端的右键菜单的实现装置，所述装置包括:
[0016]第一监听单元，用于在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件；
[0017]获取单元，用于如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息；
[0018]查找单元，用于根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单；
[0019]第一显示单元，用于根据所述右键单击事件的位置信息显示所述右键菜单。
[0020]在本发明中，通过浏览器引擎中注册右键单击的监听事件，在监听到右键单击事件时，得到右键单击事件所对应的客户端控件和右键单击事件的位置信息，根据所述客户端控件与右键菜单的对应关系，得到相应的右键菜单，结合所述右键单击事件的位置信息显示所述右键菜单。和现有技术相比，本发明通过在页面中存储与客户端控件相应的右键菜单，根据右键单击事件对应的控件查找相应的右键菜单，从而实现对客户端各控件显示相应的右键菜单，使得嵌入页面的客户端操作更为方便。
[0021]进一步的，本发明通过获取客户端所在页面所对应的DOM树，查找右击事件对应的控件所对应的DOM树形中的节点的位置，判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。这样，可以极大的减轻对客户端过多节点的右键设置工作，通过结合DOM树与控件的对应关系，采用向上查找的方法，查找效率高而且极大的提高编程的工作效率。
【专利附图】
【附图说明】
[0022]图1为本发明现有技术中提供的页面右键菜单的示意图；
[0023]图2是本发明第一实施例提供的嵌入页面的客户端的右键菜单的实现方法的实现流程图；
[0024]图3是本发明第一实施例提供的页面右键菜单的示意图；
[0025]图4是本发明第二实施例提供的嵌入页面的客户端的右键菜单的实现方法的实现流程图；
[0026]图5为本发明第三实施例提供的嵌入页面的客户端的右键菜单的实现装置的结构示意图。
【具体实施方式】
[0027]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0028]瘦客户端(Thin Client)指的是在客户端一服务器网络体系中的一个基本无需应用程序的计算机终端。它通过一些协议和服务器通信，进而接入局域网。作为应用程序平台的Internet的到来为企业应用程序提供了一个全新的领域:一个基于Internet/intranet的应用程序运用一个只包含一个浏览器的瘦客户端。这个浏览器负责解释、显示和处理应用程序的图形用户界面(GUI)和它的数据。这样的一个应用程序只需要被安装在一个Web服务器上，用户可以自动接收升级。一个解决方案只需要部署一次，甚至对成千的用户也是如此，这种想法的确很实用，尤其是Internet技术帮我们缓解了一些传统的应用程序的障碍，比如防火墙和对多平台的支持。
[0029]瘦客户端将其鼠标、键盘等输入传送到服务器处理，服务器再把处理结果回传至客户端显示。不同的客户端可以同时登录到服务器上，模拟出一个相互独立又在服务器上的工作环境。与此相反，普通客户端会尽可能多地进行本地数据处理，与服务器(或其他客户端)的通信中只传送必要的通信数据。
[0030]本发明实施例所述嵌入页面的客户端，即上述的瘦客户端，可以为嵌入页面的各种应用程序或客户端，如WEBQQ或者WEB应用等。
[0031]本发明实施例所述的一种嵌入页面的客户端的右键菜单的实现方法，所述方法包括:在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件；如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息；根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单；根据所述右键单击事件的位置信息显示所述右键菜单。
[0032]通过浏览器引擎中注册右键单击的监听事件，在监听到右键单击事件时，得到右键单击事件所对应的客户端控件和右键单击事件的位置信息，根据所述客户端控件与右键菜单的对应关系，得到相应的右键菜单，结合所述右键单击事件的位置信息显示所述右键菜单。和现有技术相比，本发明通过在页面中存储与客户端控件相应的右键菜单，根据右键单击事件对应的控件查找相应的右键菜单，从而实现对客户端各控件显示相应的右键菜单，使得嵌入页面的客户端操作更为方便。
[0033]实施例一:
[0034]图2示出了本发明第二实施例提供的嵌入页面的客户端的右键菜单的实现方法的实现流程，详述如下:
[0035]在步骤S201中，在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件。
[0036]具体的，所述浏览器可以为不同内核的浏览器，包括IE内核的浏览器，如现在的WINDOWS系统自带的浏览器和其它第三方制作的以IE为内核的浏览器、Ch1me内核的谷歌浏览器或者webkit内核的浏览器等。
[0037]所述在浏览器引擎中注册右键单击的监听事件，又称为订阅右键单击事件，可以通过监听页面中的contextmenu (上下文件菜单)事件,实现对客户端所在页面的右键单击事件的监听。
[0038]其中，所述右键单击，可以为鼠标的右键单击事件，即MOUSE_RIGHT_CLICK事件，也可以为触摸屏定义的类似于鼠标右键单击事件的指令，如触摸屏的长按指令等。
[0039]在步骤S202中，如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息。
[0040]在监听到客户端所在的页面有右键单击事件，即表示当前所述页面中出现右键单击事件或者类似于右键单击事件的指令，如触摸屏中的长按指令等。
[0041]所述单击事件对应的客户端的控件，可以为客户端的各种对话框或者各个工具栏等对象。
[0042]通过监听右键单击事件,可以得到事件的clientX、clientY属性，即右键的点击的位置，所述右键的位置信息可以用于定位需要显示的右键菜单，当然，也可以将右键菜单显示于某一固定的位置，出于方便操作的考虑，一般将右键菜单显示于所述鼠标右键单击的位置处。
[0043]在步骤S203中，根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单。
[0044]所述页面，即客户端所在的页面，在其中设置有客户端控件与右键菜单的对应关系，该客户端控件与右键菜单的对应关系由客户端对应的服务器存储。
[0045]在终端访问嵌入客户端的页面时，从服务器读取页面数据进行解析排版，得到页面数据，客户端控件与右键菜单的对应关系，可由浏览器将其数据缓存，在监听到右键单击事件时，从缓存的数据中读取右键单击事件所对应的客户端的控件所对应的右键菜单。
[0046]此处于现有技术不同之处在于，现有技术的网页页面只能定义简单的几种右键菜单，而且右键菜单的内容已经固定，而本发明能够从服务器获取右键菜单的定义数据，可以更为灵活的定义多种菜单，在屏蔽当前浏览器自带的右键菜单后，所述嵌入页面的客户端的右键菜单的形式不受浏览器自定的右键菜单的限定。
[0047]在嵌入客户端的页面的某些区域，其不受所定义的右键菜单的影响，可以仍然显示由浏览器自带的右键菜单数据进行显示。
[0048]在步骤S204中，根据所述右键单击事件的位置信息显示所述右键菜单。
[0049]所述右键菜单的位置信息，可以由监听事件的函数直接得到，如上述的contextmenu (上下文菜单)事件监听指令，根据得到的位置信息，调取相应的右键菜单数据，在所述位置产生一浮层，将右键菜单的数据于浮层中显示。
[0050]其中，浮层的大小与右键菜单中需要显示的内容相对应，在定义了每个命令菜单的长宽数据后，整个浮层的大小即可确定。
[0051]其中，所述浮层中每个菜单指令，与相应的执行命令相对应，在得到用户的确认指令，如左键单击或者键盘的确认指令后，相应的执行该菜单所对应的指令操作。如图3为本发明第一实施例提供的在嵌入页面的客户端的右键菜单的效果示意图，其包括由页面定义的撤销、复制、粘贴、删除、全部选择等菜单选项，当然其只是示意说明，还可以定义更多的操作指令。
[0052]本发明实施例通过在页面中存储与客户端控件相应的右键菜单，根据右键单击事件对应的控件查找相应的右键菜单，从而实现对客户端各控件显示相应的右键菜单，使得嵌入页面的客户端操作更为方便。
[0053]实施例二:
[0054]图4为本发明第二实施例提供的嵌入页面的客户端的右键菜单的实现方法的实现流程示意图，详述如下:
[0055]在步骤S401中，在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件。
[0056]在步骤S402中，获取客户端所在页面所对应的DOM树，所述DOM树包括多个节点。
[0057]其中，所述DOM树与客户端所在页面对应，DOM树中的节点与页面中的各个元素、文本相对应。
[0058]在步骤S403中，查找所述右击事件所对应的控件所对应的DOM树中的节点的位置。
[0059]在步骤S404中，判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。
[0060]在DOM树中包括多个节点，并且每个控件与DOM树中的节点相对应，由于DOM树中节点过多，可能部分节点不需要定义相应的右键菜单或者某个树形节点中控件的右键菜单相同，因此可以根据DOM定义部分节点的右键菜单，在查找右键单击事件对应的控件的右键菜单时，如果所述控件对应的节点没有定义相应的右键菜单，则向上查找其父节点是否定义，如果没有则再向上查找，直到查找到定义有右键菜单的节点为止。
[0061]采用DOM定义节点的右键菜单的目的在于，可以避免对页面中的客户端的过多节点的定义工作，快速的实现相类似节点的定义和查找，以提高编程效率和节约服务器数据空间。
[0062]在步骤S405中，根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单。
[0063]在步骤S406中，根据所述右键单击事件的位置信息显示所述右键菜单。
[0064]其可具体包括:
[0065]判断所述右键单击事件的位置信息的右边区域是否大于所需要展示的右键菜单的宽度；
[0066]如果所述右键单击事件的位置信息的右边区域小于所需要展示的右键菜单的宽度，则在所述右键单击事件的位置信息的右下角显示所述右键菜单。
[0067]另外，在步骤S406之前，所述方法还可以包括:
[0068]获取所述控件对应的属性信息。
[0069]根据所述控制对应的属性信息，判断所述右键菜单中的指令是否可执行。
[0070]如果所述右键菜单中的指令不可执行，则使用灰色菜单显示所述指令对应的菜单。
[0071]如在IE内核中，页面通过document, select1n.createRange O的指令获取Range (范围)对象，Range对象的text属性即为选择的文字，Webkit内核页面可以通过输入控件的seclet1nStart, select1nEnd索引知道选择的内容,如果输入框选择内容为空，将剪切、复制、删除按键灰色显示。
[0072]另外，在所述步骤S406之后，所述方法还可包括:
[0073]在步骤S407中，监听当前显示的右键菜单是否存在失去焦点事件；
[0074]在步骤S408中，如果当前显示的右键菜单存在失去焦点事件，则隐藏所述右键菜单。
[0075]其中，所述失去焦点事件包括接收到位于非右键菜单区域单击事件或者触摸事件，或者接收到的键盘指令事件。
[0076]另外，根据不同的浏览器内核，执行的操作指令的命令也不相同，因此，在步骤S401之前，还可包括:判断所述浏览器内核的类型；在所述根据所述右键单击事件的位置信息显示所述右键菜单步骤之后，所述方法还包括:接收右键菜单选择指令，根据所述浏览器内核的类型，执行所述右键菜单的指令。
[0077]其中，在IE和和webkit内嵌页面中都可以通过document.execCommand (〃undo〃，false, null);方法实现输入框的撤销操作。
[0078]剪切在IE和webkit内嵌页面中都可以通过调用document.execCommand (〃cut〃)；方法实现。
[0079]IE 内核的页面可以通过 window.clipboardData.setData (〃Text〃，text)方法将选择内容复制到系统剪贴板。webkit内核的页面却没有这个方法，但是可以通过document.execCommand ("copy")方法实现复制。
[0080]粘贴在IE和webkit内嵌页面中都可以通过调用document.execCommand ("paste", false, null)方法实现。
[0081]IE内核页面的全选需要调用输入框控件的createTextRange方法获得一个TextRange对象,调用该对象的range, select O方法可以实现输入框内容的全选。Webkit内核的页面则是通过设置输入框控件的select1nStart属性为O和select1nEnd属性为最大值实现。
[0082]IE 内核和 Webkit 内核可以简单的调用 document.execCommand(〃delete〃，false,null);方法实现选择文字的删除。
[0083]本发明实施例通过获取客户端所在页面所对应的DOM树，查找右击事件对应的控件所对应的DOM树形中的节点的位置，判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。这样，可以极大的减轻对客户端过多节点的右键设置工作，通过结合DOM树与控件的对应关系，采用向上查找的方法，查找效率高而且极大的提高编程的工作效率。
[0084]实施例三:
[0085]图5这本发明第三实施例提供的嵌入页面的客户端的右键菜单的实现装置的结构示意图，详述如下:
[0086]本发明实施例所述嵌入页面的客户端的右键菜单的实现装置，包括:
[0087]第一监听单元501，用于在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件；
[0088]获取单元502，用于如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息；
[0089]查找单元503，用于根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单；
[0090]第一显示单元504，用于根据所述右键单击事件的位置信息显示所述右键菜单。
[0091]为提高查找效率和提高编程的工作效率，所述第一监听单元501包括:
[0092]第一获取子单元5011，用于获取客户端所在页面所对应的DOM树，所述DOM树包括多个节点；
[0093]第一查找子单元5012，用于查找所述右击事件所对应的控件所对应的DOM树中的节点的位置；
[0094]判断查找子单元5013，判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。
[0095]为提高显示的有效性，所述装置还可包括:
[0096]第二获取单元505，用于获取所述控件对应的属性信息；
[0097]判断单元506，用于根据所述控制对应的属性信息，判断所述右键菜单中的指令是否可执行；
[0098]第二显示单元507，用于如果所述右键菜单中的指令不可执行，则使用灰色菜单显示所述指令对应的菜单。
[0099]第二监听单元508，用于监听当前显示的右键菜单是否存在失去焦点事件；
[0100]隐藏单元509，用于如果当前显示的右键菜单存在失去焦点事件，则隐藏所述右键菜单。
[0101]所述失去焦点事件包括接收到位于非右键菜单区域单击事件或者触摸事件，或者接收到的键盘指令事件。
[0102]本发明实施例所述装置与实施例一和实施例二所述方法相对应，在此不作重复赘述。
[0103]以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种嵌入页面的客户端的右键菜单的实现方法，其特征在于，所述方法包括: 在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件； 如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息； 根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单； 根据所述右键单击事件的位置信息显示所述右键菜单。
2.根据权利要求1所述方法，其特征在于，所述获取所述右键单击事件所对应的客户端的控件包括: 获取客户端所在页面所对应的DOM树，所述DOM树包括多个节点； 查找所述右击事件所对应的控件所对应的DOM树中的节点的位置； 判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。
3.根据权利要求1所述的方法，其特征在于，在所述根据所述右键单击事件的位置信息显示所述右键菜单步骤之前，所述方法还包括: 获取所述控件对应的属性信息； 根据所述控制对应的属性信息，判断所述右键菜单中的指令是否可执行； 如果所述右键菜单中的指令不可执行，则使用灰色菜单显示所述指令对应的菜单。
4.根据权利要求1所述方法，其特征在于，在所述根据所述右键单击事件的位置信息显示所述右键菜单步骤之后，所述方法还包括: 监听当前显示的右键菜单是否存在失去焦点事件； 如果当前显示的右键菜单存在失去焦点事件，则隐藏所述右键菜单。
5.根据权利要求4所述方法，其特征在于，所述失去焦点事件包括接收到位于非右键菜单区域单击事件或者触摸事件，或者接收到的键盘指令事件。
6.根据权利要求1所述方法，其特征在于，在所述在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件步骤之前，所述方法还包括: 判断所述浏览器内核的类型； 在所述根据所述右键单击事件的位置信息显示所述右键菜单步骤之后，所述方法还包括:接收右键菜单选择指令，根据所述浏览器内核的类型，执行所述右键菜单的指令。
7.根据权利要求1所述方法，其特征在于，所述根据所述右键单击事件的位置信息显示所述右键菜单步骤包括: 判断所述右键单击事件的位置信息的右边区域是否大于所需要展示的右键菜单的宽度； 如果所述右键单击事件的位置信息的右边区域小于所需要展示的右键菜单的宽度，则在所述右键单击事件的位置信息的右下角显示所述右键菜单。
8.一种嵌入页面的客户端的右键菜单的实现装置，其特征在于，所述装置包括: 第一监听单元，用于在浏览器引擎中注册右键单击的监听事件，监听所述客户端所在的页面是否有右键单击事件； 获取单元，用于如果所述客户端所在的页面有右键单击事件，获取所述右键单击事件所对应的客户端的控件及所述右键单击事件的位置信息； 查找单元，用于根据预设于页面中的所述客户端控件与右键菜单的对应关系，查找所述右键单击事件对应的客户端控件所对应的右键菜单； 第一显示单元，用于根据所述右键单击事件的位置信息显示所述右键菜单。
9.根据权利要求8所述装置，其特征在于，所述第一监听单元包括: 第一获取子单元，用于获取客户端所在页面所对应的DOM树，所述DOM树包括多个节占.第一查找子单元，用于查找所述右击事件所对应的控件所对应的DOM树中的节点的位置； 判断查找子单元，判断所述对应的DOM树中节点的位置是否设置有相应的右键菜单，如果没有，则查找其父节点是否设置有相应的右键菜单，依此直到查找到设置有右键菜单的节点。
10.根据权利要求8所述装置，其特征在于，所述装置还包括: 第二获取单元，用于获取所述控件对应的属性信息； 判断单元，用于根据所述控制对应的属性信息，判断所述右键菜单中的指令是否可执行； 第二显示单元，用于如果所述右键菜单中的指令不可执行，则使用灰色菜单显示所述指令对应的菜单。
【文档编号】G06F17/30GK104424205SQ201310367754
【公开日】2015年3月18日 申请日期:2013年8月21日 优先权日:2013年8月21日
【发明者】郭力恒 申请人:腾讯科技（深圳）有限公司