ExtJS：将 rel 属性添加到菜单项

Question

我们的项目中有一些菜单，其中一些项目设置了 hrefs 和 hrefTargets。对于那些，我们需要将 rel 设置为 "noopener noreferrer" 以防止漏洞。对于具有此类设置的按钮，很简单：只需添加一个带有适当标签和 rel 的 autoEl，然后 rel 将添加到该标签中。

菜单项的问题是您必须将 autoEl 的标签设置为 "div"，因为它是菜单项中的顶级元素；但是，实际的 href 和 hrefTarget 最终出现在 DIV 中的 A 标签中，添加标签设置为 "div" 的 autoEl 会将 rel 属性添加到 DIV，这是错误的元素。如果我尝试将 autoEl 设置为 "a"，则 DIV 元素将替换为 A 元素，从而导致菜单中的呈现问题，该菜单项呈现在错误的位置，并且覆盖其他菜单项之一。

如何将 rel 添加到菜单项，使其最终出现在它所属的 A 标签中，而不是 DIV 标签中？

Answer 1

您是指 'ref' 还是 'rel' 属性？无论如何，您可以使用以下肮脏的解决方案：

Ext.create('Ext.menu.Menu', {
        width: 100,
        height: 100,
        floating: false, // usually you want this set to True (default)
        renderTo: Ext.getBody(), // usually rendered by it's containing component
        items: [{
            text: 'google',
            href: "http://www.google.de/",
            hrefTarget: '_blank',
            listeners: {
                render: function(menuItem) {
                    menuItem.getEl().query('a')[0].setAttribute('rel', 'noopener noreferrer');
                }
            }
        }, {
            text: 'text item'
        }, {
            text: 'plain item',
            plain: true
        }]
    });

ExtJS：将 rel 属性添加到菜单项

ExtJS: Add rel attribute to menu item

javascript

extjs

menuitem

extjs6-classic