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
}]
});