使用 target 属性需确保 a 标签的 target 值与 iframe 的 name 值完全一致(区分大小写),否则会新开窗口;Layui tree 组件需在 done 回调中手动绑定 target;动态菜单或复杂逻辑推荐用 JS 设置 iframe.src,并注意 URL 解码。
直接用 target 属性就能让菜单链接在指定 iframe 里打开,但必须匹配 name 值,否则会新开窗口或静默失败。
菜单 a 标签的 target 必须与 iframe 的 name 一致
这是最基础也最容易忽略的一环。Layui 不做额外拦截,完全依赖原生 HTML 的 target 行为。
<a href="/user/list" target="main-frame">用户管理</a><iframe name="main-frame" src="" frameborder="0" class="layadmin-iframe"></iframe>- 两个地方的
main-frame字符串必须完全一致(区分大小写) - 如果
iframe只写了id没写name,target会失效,默认新开标签页
树形菜单(tree)需手动绑定 target
Layui 的 tree 组件默认生成的节点 <a> 标签带 target="_blank",不会走你定义的 iframe。
- 渲染后用 jQuery 修改:
$(".layui-tree-txt").attr("target", "main-frame") - 必须等
tree.render()完成后再执行,建议放在done回调里 - 如果菜单是动态加载的(比如异步请求后追加),要重新执行一遍该绑定
- 注意:不要用
click回调里去改target,因为点击时链接已触发,改晚了
导航菜单(nav)点击事件中动态设置 iframe.src
当菜单结构复杂、URL 需计算或权限控制时,更推荐 JS 控制而非纯 HTML target。
- 给菜单项加
data-url:<dd data-url="/order/detail">订单详情</dd> - 监听点击:
$(".layui-nav-child dd").on("click", function(){ $("#main-iframe").attr("src", $(this).data("url")); }) -
iframe必须有id或其他可定位 selector,且不能只靠name - 如果页面内有多个
iframe,务必确认 selector 唯一,否则可能改错目标
URL 中含中文或特殊字符时要解码
从 query string(如 ?page=/sys/设置)取值后直接赋给 src,浏览器会报 ERR_INVALID_URL。
- 必须用
decodeURIComponent()处理:$("#main-iframe").attr("src", decodeURIComponent(url)) - 若 URL 来自后端接口返回,也要检查是否已编码;未编码则无需解码,否则乱码
- 常见错误:在
getURLParam函数里漏掉decodeURIComponent,导致 iframe 加载空白
真正麻烦的不是怎么写,而是不同菜单组件(nav、tree、自定义 ul/li)混用时,target、data-url、href 三种方式容易交叉污染,建议统一选一种并封成复用函数。


















