Question

我在我的应用程序中使用iframe，如下所示，

Sample.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    function rightclickdisabled()
    {
    View.document.designMode = 'On'; 
    window.frames["View"].document.oncontextmenu = function(){return false;}; 
    }
    </SCRIPT>
    <BODY onload="rightclickdisabled();">
    <iframe src="" id="View" name="View" style="height: 100px;width: 460px;border: 1px solid #A1A4B5;" />
    </BODY>
    </HTML>

这里我禁用iframe中的右键单击，它运行正常。现在我的问题是'是否可以自定义右键单击弹出菜单'？

我只需要在弹出窗口中剪切，复制，粘贴和选择所有选项。

如果我在iframe中禁用右键，则无法获得任何这些选项。

请帮我解决这个问题。

Answer 1

不，您无法自定义上下文菜单的内容。您可以完全抑制它，就像您正在做的那样，并且通过一些重要的努力可以弹出带有自定义选项的模拟菜单，但是无法包含标准菜单项，如剪切/复制/粘贴在该菜单中，因为无法从Javascript触发它们。

Answer 2

我为一家公司制作了这个插件。它虽然是在jQuery中构建的。

;(function($){

 // We name the function clicker
 $.fn.clicker = function(options) {

     // Default settings - can be replaced by options
     var defaults = {
         mouse: "click"     // click is an event that contains both the mousedown and mouse up event in one.
     }

     // Extend the options and defaults to variables
     var opts = $.extend(defaults, options);

     // Now start the Function
     return this.each(function() {

         // The original element is defined with a variable
         var element = $(this);

         // We have to define the functions that has to react based on the option 'mouse'
         // So if it is - as standard - set to 'click'
         if (opts.mouse == "click") {

             // ... we want to do a 'click'-function (Basic jQuery)
             // when the element is clicked
             element.click(function(e) {

                 // ... we ensure which mouse button has been pressed
                 switch (e.which) {

                     // ... and execute a function based on that information

                     // Left Mouse Button
                     case 1: left_mouse_command(); break;

                     // Middle Mouse Button
                     case 2: middle_mouse_command(); break;

                     // Right Mouse Button
                     case 3: right_mouse_command(); break;

                 }

                 e.preventDefault();

             });

         // Else if 'mouse' is set to 'mouseup'
         } else if (opts.mouse == "mouseup") {

             // ... we want to do a 'mouseup'-function (Basic jQuery)
             // when the mouse is released from the element
             element.mouseup(function(e) {

                 // ... we ensure which mouse button has been pressed
                 switch (e.which) {

                     // ... and execute a function based on that information

                     // Left Mouse Button
                     case 1: left_mouse_command(); break;

                     // Middle Mouse Button
                     case 2: middle_mouse_command(); break;

                     // Right Mouse Button
                     case 3: right_mouse_command(); break;

                 }
                 e.preventDefault();
             });

         // Else if 'mouse' is set to 'mousedown'
         } else if (opts.mouse == "mousedown") {

             // ... we want to do a 'mousedown'-function (Basic jQuery)
             // when the mouse begins to click on the element
             element.mousedown(function(e) {

                 // ... we ensure which mouse button has been pressed
                 switch (e.which) {

                     // ... and execute a function based on that information

                     // Left Mouse Button
                     case 1: left_mouse_command(); break;

                     // Middle Mouse Button
                     case 2: middle_mouse_command(); break;

                     // Right Mouse Button
                     case 3: right_mouse_command(); break;

                 }
                 e.preventDefault();
             }); 
         }
     });
 }
 })(jQuery);

然后你可以写一个像这样的jquery代码：

$(document).ready(function() {
    $('.element').clicker();
});

function right_mouse_command() {
    // Maybe get coordinates from the mouse
    $('div.box').show();
}

如何自定义iframe右键单击弹出窗口

2 个答案: