## 代码概述
该代码通过HTML和JavaScript实现了一个网站嵌入功能，并根据访问的URL动态调整logo图片的显示位置。
## 代码解析
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入网站</title>
<style>
body, html {
margin
: 0;
padding
: 0;
width
: 100%;
height
: 100%;
overflow
: hidden;
}
#container {
position
: relative;
width
: 100%;
height
: 100%;
}
#logo {
position
: absolute;
width
: 200px;
height
: auto;
z-index
: 999;
}
#iframe {
width
: 100%;
height
: 100%;
border
: none;
}
</style>
</head>
<body>
<div id="container">
<img id="logo" src="your-logo-url
.png" alt="Logo">
<iframe id="iframe" src="
https
://cj
.87
zy.cn/admin/login
.html"></iframe>
</div>
<script>
const iframe = document
.getElementById('iframe');
const logo = document
.getElementById('logo');
iframe
.onload = function() {
const currentUrl = iframe
.contentWindow
.location
.href;
if (currentUrl === "
https
://cj
.87
zy.cn/admin/login
.html") {
// 登录页面，logo居中显示
logo
.style
.top = "50%";
logo
.style
.left = "50%";
logo
.style
.transform = "translate(-50%, -50%)";
logo
.style
.display = "block";
} else if (currentUrl === "
https
://cj
.87
zy.cn/admin/index
.html") {
// 登录后的页面，logo左上角显示
logo
.style
.top = "0";
logo
.style
.left = "0";
logo
.style
.transform = "none";
logo
.style
.display = "block";
} else {
// 其他页面，隐藏logo
logo
.style
.display = "none";
}
};
</script>
</body>
</html>
```
1
. **HTML结构**：
- `#container`是一个相对定位的容器，包含logo图片和iframe
- `#logo`是覆盖在网站上的logo图片
- `#iframe`用于嵌入外部网站
2
. **CSS样式**：
- 设置了body和html的宽度和高度为100%，确保全屏显示
- `#logo`使用绝对定位，确保其覆盖在iframe之上
- `#iframe`设置为100%宽度和高度，以填充整个页面
3
. **JavaScript逻辑**：
- 监听iframe的加载完成事件
- 根据iframe中加载的URL，动态调整logo的位置和显示状态
- 在登录页面，logo居中显示
- 在登录后的页面，logo显示在左上角
- 在其他页面，隐藏logo
## 知识点
### iframe嵌入网页
- HTML `<iframe>`标签用于嵌入另一个网页
- 可以通过src属性指定要嵌入的网页地址
- 使用JavaScript可以控制iframe的行为和样式
### 元素定位
- CSS的position属性用于控制元素的定位方式
- absolute定位基于最近的定位祖先元素
- 可以使用top、bottom、left、right属性精确控制元素位置
### DOM操作
- JavaScript可以操作HTML文档的结构和样式
- 通过getElementById获取元素对象
- onload事件处理程序用于在页面加载完成后执行代码
- style属性用于动态修改元素的CSS样式
博客提及图片制作不错，具有可借鉴性。
扫一扫
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
