我们在项目中有一些菜单，其中某些项目设置了hrefs和hrefTargets。对于这些，我们需要为“ noopener noreferrer”设置一个rel，以防止出现漏洞。对于具有这种设置的按钮，很简单：只需添加带有适当标签和rel的autoEl，然后rel将添加到该标签。
菜单项的问题在于，您必须将autoEl的标签设置为“ div”，因为这是菜单项中的顶级元素。但是，实际的href和hrefTarget最终位于DIV中的A标签中，并且将标签设置为“ div”的autoEl添加到DIV中会添加rel属性，这是错误的元素。如果我尝试将标签设置为“ a”的autoEl设置为DIV元素，则将其替换为A元素，从而导致菜单中的渲染问题，其中该菜单项在错误的位置渲染并覆盖了另一个菜单中的一个项目。
如何将rel添加到菜单项中，使其最终位于所属的A标签而不是DIV标签中？
您是指“ 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
}]
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句