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

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://whosebug.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 元素添加上下文菜单属性？

Adding a context menu attribute to the body element?

javascript

firefox

greasemonkey

contextmenu