Question

我正在开发一个用户脚本，其中一个功能应该可以通过本机浏览器上下文菜单中的其他菜单项获得。

所以，首先，我要插入页面正文：

<menu type="context" id="mymenu">
    <menuitem label="My Fancy Something"></menuitem>
</menu>

然后尝试在body元素中使用它：

document.body.contextMenu = document.querySelector('#mymenu');

或

document.body.contextMenu = 'mymenu';

无论哪种方式，都失败了。

console.log(document.body.contextMenu); // returns null

但是，当我访问Firefox DOM检查器，并将该属性手动放入body标签时，它实际上有效，并使新的上下文菜单元素出现在文档中。

我做错了什么？

Answer 1

请勿尝试设置.contextMenu，原因与avoid things like .onclick()完全相同。使用该方法会产生范围和沙箱问题。

设置contextmenu 属性，而不是DOM属性。

这是一个完整的Greasemonkey脚本，它显示了如何添加上下文菜单：

// ==UserScript==
// @name     _Create and wire-in a sample context menu
// @match    https://stackoverflow.com/questions/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var myMenu  = $( `
    <menu type="context" id="myFirstContextMenu">
        <menuitem data-bg-color="pink"  label="Set background to pink."></menuitem>
        <menuitem data-bg-color="lime"  label="Set background to lime."></menuitem>
        <menuitem data-bg-color="reset" label="Reset background color."></menuitem>
    </menu>
` ).appendTo ("body");

$("body").attr ("contextmenu", 'myFirstContextMenu');

myMenu.on ("click", "menuitem", function (zEvent) {
    var targBgColor = $(this).data ("bgColor")  ||  "ERROR";

    switch (targBgColor) {
        case "pink":
        case "lime":
            $("body").css ("background-color", targBgColor);
            break;
        case "reset":
            $("body").css ("background-color", "");
            break;
        default:
            alert ('<menuitem> "' + targBgColor + '" not wired-in correctly.');
            break;
    }
} );

注意：这种<menu>似乎only be supported by Firefox at the moment。

将上下文菜单属性添加到body元素？

1 个答案: