综述: 优化平台端web权限管理页面的iframe嵌入功能
- 修改权限编辑菜单项的链接方式,从hash路由改为相对路径引用 - 新增openTabWithIframe函数,用于通过iframe方式加载子页面 - 优化菜单项点击事件处理逻辑,支持默认链接跳转行为 - 为iframe标签页添加基础样式支持
This commit is contained in:
		
							parent
							
								
									212e69c24e
								
							
						
					
					
						commit
						3321e8e979
					
				|  | @ -448,7 +448,7 @@ | |||
|                             </span> | ||||
|                         </button> | ||||
|                         <div class="submenu"> | ||||
|                             <a href="#/permission/list" class="submenu-item" onclick="openTab(this, '权限编辑')">权限编辑</a> | ||||
|                             <a href="./权限管理/权限编辑.html" class="submenu-item" onclick="openTabWithIframe(this, '权限编辑')">权限编辑</a> | ||||
|                             <a href="#/permission/manager" class="submenu-item" onclick="openTab(this, '市场经营者创建')">市场经营者创建</a> | ||||
|                         </div> | ||||
|                     </li> | ||||
|  | @ -670,6 +670,46 @@ | |||
|             setActiveTab(tabId, title); | ||||
|         } | ||||
| 
 | ||||
|         // 通过iframe打开标签页 | ||||
|         function openTabWithIframe(link, title) { | ||||
|             const tabId = title.toLowerCase().replace(/\s+/g, '-'); | ||||
|              | ||||
|             // 检查标签页是否已存在 | ||||
|             const existingTab = document.querySelector(`[data-tab="${tabId}"]`); | ||||
|             if (existingTab) { | ||||
|                 // 激活已存在的标签页 | ||||
|                 setActiveTab(tabId, title); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             // 创建新标签页 | ||||
|             const tabsContainer = document.querySelector('.tabs-container'); | ||||
|             const newTab = document.createElement('div'); | ||||
|             newTab.className = 'tab-item'; | ||||
|             newTab.setAttribute('data-tab', tabId); | ||||
|             newTab.innerHTML = ` | ||||
|                 <span class="tab-title">${title}</span> | ||||
|                 <span class="tab-close" onclick="closeTab(this)">×</span> | ||||
|             `; | ||||
|             newTab.onclick = () => setActiveTab(tabId, title); | ||||
|             tabsContainer.appendChild(newTab); | ||||
| 
 | ||||
|             // 创建新内容区域,使用iframe嵌入页面 | ||||
|             const contentArea = document.querySelector('.content-container'); | ||||
|             const newContent = document.createElement('div'); | ||||
|             newContent.id = `tab-content-${tabId}`; | ||||
|             newContent.className = 'tab-content'; | ||||
|             newContent.style.display = 'none'; | ||||
|             newContent.innerHTML = ` | ||||
|                 <h2>${title}</h2> | ||||
|                 <iframe src="${link.href}" style="width: 100%; height: 600px; border: none;"></iframe> | ||||
|             `; | ||||
|             contentArea.appendChild(newContent); | ||||
| 
 | ||||
|             // 激活新标签页 | ||||
|             setActiveTab(tabId, title); | ||||
|         } | ||||
| 
 | ||||
|         // 设置活动标签页 | ||||
|         function setActiveTab(tabId, title) { | ||||
|             // 移除所有标签页的活动状态 | ||||
|  | @ -739,6 +779,8 @@ | |||
|         // 菜单项点击事件处理 | ||||
|         document.querySelectorAll('.submenu-item').forEach(item => { | ||||
|             item.addEventListener('click', function(e) { | ||||
|                 // 如果有onclick属性,阻止默认行为并执行onclick | ||||
|                 if (this.onclick) { | ||||
|                     e.preventDefault(); | ||||
|                      | ||||
|                     // 移除其他菜单项的激活状态 | ||||
|  | @ -749,13 +791,12 @@ | |||
|                     // 激活当前菜单项 | ||||
|                     this.classList.add('active'); | ||||
|                      | ||||
|                 // 如果有onclick属性,执行它 | ||||
|                 if (this.onclick) { | ||||
|                     const title = this.textContent; | ||||
|                     this.onclick.call(this); | ||||
|                     // 更新面包屑导航 | ||||
|                     updateBreadcrumb(title); | ||||
|                 } | ||||
|                 // 如果没有onclick属性,允许默认行为(链接跳转) | ||||
|             }); | ||||
|         }); | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue