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

Question

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

菜单项的问题是您必须将 autoEl 的标签设置为“div”，因为这是菜单项中的顶级元素；但是，实际的 href 和 hrefTarget 最终出现在 DIV 内的 A 标记中，并且添加标记设置为“div”的 autoEl 会将 rel 属性添加到 DIV，这是错误的元素。如果我尝试将标签设置为“a”的 autoEl 设置，则 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
        }]
    });