综述: 优化Iframe内容显示，实现无缝全屏效果
- 在`index.html`中，通过动态注入CSS的方式，强制使iframe内的页面顶格全屏显示，移除了不必要的边距和滚动条。 - 调整`权限分配`和`权限编辑`页面的样式，移除容器的外边距、圆角和阴影，以适应新的全屏嵌入模式。
This commit is contained in:
parent
a25d392e7c
commit
710c42635f
|
|
@ -0,0 +1,52 @@
|
|||
## IFRAME嵌入页面样式规范
|
||||
═══════════════════════
|
||||
|
||||
为确保所有通过iframe嵌入的页面都能顶格显示（无边距、无空白），所有嵌入页面必须遵循以下CSS样式规范：
|
||||
|
||||
### 必须修改的样式：
|
||||
|
||||
1. **body标签样式**：
|
||||
```css
|
||||
body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
2. **容器样式（.container或主容器）**：
|
||||
```css
|
||||
.container {
|
||||
width: 100% !important;
|
||||
height: 100vh !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
3. **响应式设计**：
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 修改清单：
|
||||
- [ ] 移除body的padding
|
||||
- [ ] 将max-width改为width: 100%
|
||||
- [ ] 将margin: 0 auto改为margin: 0
|
||||
- [ ] 移除border-radius和box-shadow
|
||||
- [ ] 确保高度为100vh
|
||||
- [ ] 检查响应式样式
|
||||
|
||||
### 适用范围：
|
||||
- 权限管理模块所有页面
|
||||
- 产品管理模块所有页面
|
||||
- 用户管理模块所有页面
|
||||
- 系统设置模块所有页面
|
||||
- 所有未来新增的iframe嵌入页面
|
||||
|
|
@ -109,6 +109,8 @@
|
|||
padding: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
|
|
@ -124,7 +126,10 @@
|
|||
}
|
||||
|
||||
.content-body {
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
|
|
@ -148,11 +153,23 @@
|
|||
/* iframe样式 */
|
||||
.content-iframe {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 为iframe内的页面提供通用的顶格显示样式 */
|
||||
.content-iframe::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* 通过JavaScript动态注入CSS到iframe中，确保所有嵌入页面都顶格显示 */
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -370,11 +387,11 @@
|
|||
// 如果是权限编辑或市场经营者创建，显示iframe
|
||||
if (title === '权限编辑') {
|
||||
contentBody.innerHTML = `
|
||||
<iframe class="content-iframe" src="权限管理/权限编辑.html"></iframe>
|
||||
<iframe class="content-iframe" src="权限管理/权限编辑.html" onload="injectFullScreenStyles(this)"></iframe>
|
||||
`;
|
||||
} else if (title === '市场经营者创建') {
|
||||
contentBody.innerHTML = `
|
||||
<iframe class="content-iframe" src="权限管理/权限分配.html"></iframe>
|
||||
<iframe class="content-iframe" src="权限管理/权限分配.html" onload="injectFullScreenStyles(this)"></iframe>
|
||||
`;
|
||||
} else {
|
||||
// 其他菜单项直接在内容区域显示iframe
|
||||
|
|
@ -435,10 +452,63 @@
|
|||
|
||||
// 如果有对应的URL，则在iframe中显示该页面
|
||||
if (url) {
|
||||
contentBody.innerHTML = `<iframe class="content-iframe" src="${url}"></iframe>`;
|
||||
contentBody.innerHTML = `<iframe class="content-iframe" src="${url}" onload="injectFullScreenStyles(this)"></iframe>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 为iframe注入通用的全屏样式
|
||||
function injectFullScreenStyles(iframe) {
|
||||
try {
|
||||
// 等待iframe加载完成
|
||||
iframe.onload = function() {
|
||||
try {
|
||||
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
|
||||
// 创建样式标签
|
||||
const style = iframeDoc.createElement('style');
|
||||
style.textContent = `
|
||||
* {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100% !important;
|
||||
height: 100vh !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// 将样式添加到iframe的head中
|
||||
iframeDoc.head.appendChild(style);
|
||||
} catch (e) {
|
||||
// 如果跨域无法访问iframe内容，忽略错误
|
||||
console.log('无法访问iframe内容（可能是跨域限制）:', e);
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
console.log('注入样式失败:', e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -16,15 +16,17 @@
|
|||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -331,7 +333,7 @@
|
|||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin: 10px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,15 +16,17 @@
|
|||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -414,7 +416,7 @@
|
|||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin: 10px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue