菜单项的 href 必须为合法 url（如 ./user/list.html），target 必须严格匹配 iframe 的 name 属性（非 id），否则点击将新开窗口；若需自定义跳转逻辑，应禁用 href+target，改用 click 事件手动设置 iframe.src。
直接用 layui.use('menu') 初始化后，菜单项的 href 属性会自动绑定到页面内指定 iframe 的 src，但前提是 iframe 必须有 name 或 id，且 menu 里要正确配置 target —— 否则点击没反应或新开窗口。
menu 项的 href 和 target 怎么配才生效
Layui 的 menu 组件本身不处理跳转逻辑，它只负责渲染结构和触发事件；实际跳转靠浏览器原生行为，所以必须按表单/链接语义来写：
-
href值必须是合法 URL（支持相对路径，如./user/list.html），不能是空字符串或# -
target必须匹配目标iframe的name属性（不是id！），例如target="content-frame"对应<iframe name="content-frame"></iframe> - 如果
iframe只写了id="content-frame"没写name，target就会失效，默认新开 tab - 菜单数据中每个项的结构类似：
{ title: '用户管理', href: './user/list.html', target: 'content-frame' }
为什么点了菜单没进 iframe，反而弹新窗口
这是最常见问题，本质是浏览器找不到匹配的 browsing context（即命名的 iframe）：
- 检查 iframe 是否漏写了
name属性 ——id不起作用，name才是 target 查找依据 - 确认
target字符串和name完全一致（区分大小写、空格） - iframe 是否被 JS 动态移除或替换过？如果初始化 menu 时 iframe 还不存在，后续再插入，target 也会失效
- 页面存在多个同名
name的 iframe？浏览器只会加载到第一个
想用 JS 控制跳转（比如加个 loading、校验权限）怎么办
放弃 href+target 自动跳转，改用 click 事件手动操作 iframe.contentWindow.location.href：
layui.use('menu', function(){
var $ = layui.$;
var menu = layui.menu;
// 渲染菜单（注意：data 里不要设 href，避免默认跳转）
menu.render({
elem: '#menu',
data: [
{ title: '仪表盘', id: 'dashboard' },
{ title: '订单管理', id: 'order' }
]
});
// 绑定点击
$('#menu .layui-menu-item').on('click', function(){
var id = $(this).data('id');
var urlMap = {
'dashboard': './dashboard.html',
'order': './order/list.html'
};
var iframe = document.querySelector('iframe[name="content-frame"]');
if (iframe) {
iframe.src = urlMap[id] || './404.html';
}
});
});
这样更可控，也方便加权限判断、埋点或错误 fallback。
真正容易被忽略的是：Layui 的 menu 组件在 v2.9+ 后已不再维护，官方推荐迁移到 layUI Pro 或原生方案；如果你项目里用了自定义主题或动态菜单，name 属性拼写错误、iframe 插入时机不对、或者用了 Vue/React 做容器却忘了把 iframe 放在根节点下——这些都会让 target 失效，而且控制台几乎不报错。
