javascript - Chrome 扩展程序 window.history 失败...但是为什么呢？

Question

这完全让我陷入困境。这里的想法是我需要禁用上下文菜单在某些机器上工作的能力。 问题是，当我在上下文菜单中单击前进和后退处理程序时，页面保持不变，除非在尝试前进时，URL 会附加一个“#”..

我运行了以下测试:

在具有一些后退导航历史记录的选项卡上打开 Chrome 开发工具，然后切换到开发工具控制台选项卡。

我输入:

window.history.back() -- 页面返回到上一页就好了。 window.history.forward() -- 页面前进到最后一页就好了。

然后我将控制台框架顶部的上下文从 <top frame> 切换为到我的分机的分机条目“chrome-extension://abcd...”。

我输入:

window.history.back() -- 页面返回到上一页就好了。 window.history.forward() -- 页面前进到最后一页就好了。

但是，我的扩展程序中的按钮以及随附的代码不起作用。我很想得到一些关于为什么会发生这种情况的反馈。

现在另一个有趣的好消息可能会帮助某人了解可能发生的事情:

我关闭并重新打开了 Chrome，并在控制台中运行了 window.history 方法测试(从上面)。这些方法按预期正常工作。然后我再次尝试测试我编写的新上下文菜单处理程序，它继续失败。然而;在这些测试之后，如果我尝试运行 history.back控制台中的方法，它们现在失败了。

在禁用所有 其他扩​​展并重新启动浏览器后，使用相同的步骤进行测试，结果相同。

list .json

{
    "name": "Disable Context Menu",
    "version": "0.1",
    "manifest_version": 2,
    "description": "Disabled context menu items for thin clients",
    "permissions": ["contextMenus","tabs"],
    "icons" : {"16": "/icons/printer.png",
               "16": "/icons/reload.png",
               "16": "/icons/back.png",
               "16": "/icons/forward.png"},
    "web_accessible_resources": ["/icons/printer.png","/icons/reload.png",
                                 "/icons/back.png","/icons/forward.png"],
    "content_scripts": [{ 
                           "matches" : ["<all_urls>"],
                           "js" : ["/js/jquery.js","/js/jquery.contextmenu.js","/js/content.js"],
                           "css" : ["/css/jquery.contextmenu.css","/css/menu.css"]
                       }]
}

content.js

function showPrintDialog()
{
    window.print();
}

$().ready(
    function()
    {
        $('body')
            .contextPopup(
            {
                title: 'Generic Context Menu',
                items: 
                [
                    {label: "forward", 
                     icon: chrome.extension.getURL('/icons/forward.png'),
                     action: function(){history.forward()},
                    },
                    {label: "back", 
                     icon: chrome.extension.getURL('/icons/back.png'),
                     action: function(){function(){history.back()},
                    },
                    {label: "reload", 
                     icon: chrome.extension.getURL('/icons/reload.png'),
                     action: function(){window.location.reload(true)}},
                     null,
                    {label: "print", 
                     icon: chrome.extension.getURL('/icons/printer.png'), 
                     action: function(){showPrintDialog()}},
                ],
            });
    });

Answer 1

这是 jQuery 上的错误 simple-context-menu plugin您正在使用。替换行:

row.find('a').click(function () { item.action(e); });

通过:

row.find('a').click(function (e) { e.preventDefault(); item.action(e); });

如果不添加 preventDefault()，单击菜单会导致浏览器导航到带有附加 # 的当前 url，这会干扰您预期的 历史 操作。