Layui tree 组件默认 target="_blank" 会绕过 iframe，需在 done 回调中将 $(".layui-tree-txt").attr("target", "main-frame")；或用 beforeClick 钩子读取 item.url 并设置 iframe.src，同时 return false 阻止默认跳转。
tree 组件默认 target="_blank" 会绕过 iframe
Layui 的 tree 渲染后，每个节点文字包裹在 <a> 标签里，默认带 target="_blank"，点击直接新开窗口，根本不会进你设好的 <iframe name="main-frame">。这不是 bug，是组件默认行为。
必须等 tree.render() 完成、DOM 真实挂载后再手动改：$(".layui-tree-txt").attr("target", "main-frame")。别写在 click 回调里——链接触发瞬间就跳走了，改 target 已经晚了。
- 推荐放在
done回调中执行，确保 DOM 就绪 - 如果菜单是异步加载（比如点击父节点才拉子菜单），新追加的节点也要重新执行一遍该绑定
-
main-frame必须和 iframe 的name属性值完全一致，大小写敏感
导航菜单（nav）更适合用 JS 动态控制 src
当菜单 URL 需要拼接参数、做权限校验或从 data 属性读取时，硬写 target 不灵活，也容易出错。更稳的做法是监听点击，手动设置 iframe.src。
给菜单项加 data-url：<dd data-url="/order/detail">订单详情</dd>，然后绑定事件：
$(".layui-nav-child dd").on("click", function(){
const url = $(this).data("url");
$("#main-iframe").attr("src", decodeURIComponent(url));
});
- iframe 必须有唯一
id（如id="main-iframe"），仅靠name无法用 jQuery 精准定位 - URL 若含中文或特殊字符（如
?page=/sys/设置），必须用decodeURIComponent()解码，否则浏览器报ERR_INVALID_URL - 后端返回的 URL 如果已编码（如
%E8%AE%BE%E7%BD%AE），前端再解码；如果没编码，直接赋值，重复解码会导致乱码
动态树形菜单中 url 字段怎么生效
后端返回的菜单数据里，url 字段本身不自动绑定跳转逻辑。Layui tree 渲染时只把 name 当文本显示，url 是“死字段”，除非你主动读取它。
正确做法是在 nodes 数据中保留 url，然后利用 beforeClick 回调（或渲染后遍历 DOM）提取并赋值：
tree.render({
elem: '#menuTree',
data: menuData,
beforeClick: function(item){
if(item.url){
$("#main-iframe").attr("src", decodeURIComponent(item.url));
return false; // 阻止默认 a 标签跳转
}
}
});
-
beforeClick是 tree 模块原生支持的钩子，比 DOM 操作更可靠 -
return false很关键——它能阻止<a>标签的默认跳转，让 JS 控制生效 - 注意：
item.url值如果是相对路径（如/user/list），需确认当前域名上下文是否匹配
中文 URL 跳转失败的两个典型场景
用户点菜单后 iframe 显示空白页或报错，大概率是 URL 编码问题。不是所有中文都得解码，要看来源：
- 前端拼接的 URL（如
`/report?name=${encodeURI(用户名)}`）→ 后端接收时解码，前端src赋值前**不要**再decodeURIComponent - 后端返回的 JSON 中
"url": "/sys/设置"→ 这个字符串在传输中会被自动 URI 编码（变成%E8%AE%BE%E7%BD%AE），前端拿到后需显式decodeURIComponent - 用浏览器开发者工具 Network 面板看接口响应体，确认
url字段值是否已含%xx，以此判断是否需要解码
真正容易被忽略的是：同一个菜单系统里，静态配置的 URL 和接口返回的 URL 可能编码策略不一致，导致一部分能跳、一部分 404。上线前务必用含中文的真实菜单路径走一遍全流程。
