空白
bash
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明页面-中国</title>
<style>
/* 1. 设置关键的透明背景 */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/* 将 HTML 和 Body 的背景色设置为完全透明 */
background-color: transparent !important;
/* 某些环境下可能需要这个属性来确保背景不被绘制 */
background: none;
}
/* 2. 使用 Flexbox 进行布局定位 */
body {
display: flex;
/* justify-content: flex-end; 将内容对齐到主轴末端（右侧） */
justify-content: flex-end;
/* align-items: center; 如果你想让文字在垂直方向居中，取消这行的注释 */
/* align-items: center; */
/* 防止文字紧贴浏览器边缘，增加一些内边距 */
padding: 20px 50px;
box-sizing: border-box;
}
/* 3. 设置大号文字样式 */
.large-text {
/* 设置非常大的字体尺寸，可以使用 rem 或 px */
font-size: 15rem; /* 相当于默认字体的15倍大 */
font-weight: 900; /* 特粗 */
font-family: "Microsoft YaHei", "SimHei", sans-serif; /* 优先使用微软雅黑或黑体 */
color: #000000; /* 文字颜色黑色 */
/* 可选：为了在复杂背景上也能看清，可以加一点点文字阴影 */
/* text-shadow: 2px 2px 8px rgba(255,255,255,0.5); */
/* 防止文字换行 */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="large-text">
中国
</div>
</body>
</html>点击显示文字
bash
这是一个非常典型且令人沮丧的问题。
**简单回答：**
**是的，标准的 HTML `<input type="file">` 在 Unreal Engine (UE) 的内嵌浏览器（WebBrowser Widget）中默认是失效的。**
**原因解释：**
UE 内置的浏览器是一个"阉割版"的 Chrome (CEF)。出于安全和沉浸式体验的考虑，它**默认禁止**网页弹窗（Alert）和系统级的文件选择框（File Dialog）。因为它不知道该如何把 Windows 的文件窗口"叠加"在 UE 的 3D 游戏画面之上。
要在 UE 里通过网页点按钮选文件，通常有两条路：
1. **C++ 开发层面**：开发人员必须在 UE 源码里重写 `OnShowDialog` 接口（你可能做不到这一点，除非你有引擎源码）。
2. **JS 通信层面（JS Bridge）**：网页通过 JavaScript 给 UE 发送信令（比如 `ue.interface.openFile()`），让 UE 去调起文件选择框，选好后把路径传回给网页。（这需要知道该平台的专用接口）。
-----
### 既然标准方法不通，我们先做"排查测试"
首先，我们要确认**按钮点击本身是否生效了**（很有可能 `alert` 也被屏蔽了，导致你以为没反应）。
请用下面这段代码替换之前的 HTML。这段代码**不弹窗**，而是直接**改变文字颜色**。如果点击后文字变色，说明按钮是活的，只是文件框被毙了。
#### 测试专用代码（验证点击事件）
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试点击</title>
<style>
html, body {
margin: 0; padding: 0; width: 100%; height: 100%;
background: transparent !important;
display: flex; justify-content: flex-end; align-items: center;
padding-right: 50px; box-sizing: border-box;
}
.container {
display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
}
#mainText {
font-size: 10rem; font-weight: 900; color: #000000;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
font-family: "Microsoft YaHei", sans-serif;
}
.btn {
background-color: #e60012; color: white;
font-size: 1.5rem; padding: 15px 40px; border: none; border-radius: 8px;
cursor: pointer;
}
.btn:active { transform: scale(0.95); }
</style>
</head>
<body>
<div class="container">
<div id="mainText">中国</div>
<button class="btn" id="actionBtn">点击测试</button>
<input type="file" id="fileInput" style="display:none">
</div>
<script>
var btn = document.getElementById('actionBtn');
var text = document.getElementById('mainText');
var fileInput = document.getElementById('fileInput');
btn.onclick = function() {
// 1. 视觉反馈：点击后先把字变成绿色，证明JS跑通了
text.style.color = 'green';
text.innerText = "已点击";
// 2. 尝试调用文件框 (在UE里大概率没反应)
try {
fileInput.click();
} catch (e) {
text.innerText = "调用失败";
}
};
// 3. 监听文件选择（如果奇迹发生）
fileInput.onchange = function() {
text.innerText = "选了文件";
text.style.color = 'blue';
};
</script>
</body>
</html>如果测试结果是"字变绿了，但没弹框"
那么这就是 UE 限制 。你现在的处境是：作为用户/脚本编辑者，你无法强行让 HTML 调起文件框。
解决方案建议
在这个封闭的软件系统（101 PPT/MetaUI）里，你想实现"自定义上传 PPT"，最可行的路径回到了我们之前的讨论：
- 不要试图在软件运行中上传：既然软件限制了文件框，就不要在这个 H5 页面里做"上传"动作。
- 预先处理（Hardcode） ：
- 在电脑上先把 PPT 转成图片。
- 把图片上传到公网图床。
- 直接改 HTML 代码，把图片写死在里面，或者把图片 URL 写在 JSON 里。
如果你必须要在那个红色按钮点击后做点什么，你可以把按钮改成 "刷新图片" 的功能：
javascript
// 修改按钮逻辑：点击后，强制把背景图换成你预设好的另一张图
btn.onclick = function() {
// 这里填入你上传好的第二张 PPT 图片地址
var nextImage = "https://你的图床/ppt_page_02.jpg";
// 假设你有一个 img 标签
document.getElementById('myImg').src = nextImage;
};总结：在 UE 的 MetaUI 里，如果没有官方提供的 JS 接口文档（API），你是无法呼出系统文件选择框的。请改用"预先上传图片 + 代码替换 URL"的方案。
# 点击显示图片
```bash
这一步测试非常关键！
**"字变绿了"说明了两个事实：**
1. **好消息：** 你的网页代码里的 JavaScript 是**正常运行**的（按钮点击事件被触发了，DOM 操作生效了）。
2. **坏消息：** 文件选择框没有弹出来，**并不是**代码写错了，而是**彻底证实了 UE 浏览器内核（CEF）禁止了本地文件访问权限**。
这是 UE 嵌入式网页的常见安全限制：它允许代码跑逻辑（变色、计算），允许联网（加载 URL 图片），但死活不让你访问用户硬盘（打不开文件选择框）。
-----
### 既然"弹框选文件"这条路不通，我们换一条路
要在 UE 里展示你的 PPT 图片，现在最可行的方案改为：**"输入图片链接 -\> 点击加载"**。
既然你前面已经有了 PPT 的图片链接（比如 `https://cdncs.101.com/...`），我们可以做一个输入框，把你准备好的链接粘贴进去，一点按钮，图片就出来了。
**这是一个肯定能用的"手动替换版"代码：**
你可以把下面的代码保存为 `index.html`。
### 功能说明：
1. 依然是透明背景。
2. 默认显示大号文字"中国"。
3. 下方有一个输入框，你可以粘贴之前那个很长的 PPT 图片 URL。
4. 点击"加载图片"按钮，**"中国"两个字会消失，替换为你粘贴的那张 PPT 图片**。
<!-- end list -->
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明页面-URL加载器</title>
<style>
/* 基础设置：透明背景 */
html, body {
margin: 0; padding: 0; width: 100%; height: 100%;
background: transparent !important;
overflow: hidden;
}
/* 布局容器：定位在右侧 */
.container {
position: absolute;
top: 50%; right: 50px;
transform: translateY(-50%);
display: flex; flex-direction: column; align-items: flex-end;
gap: 15px;
max-width: 800px; /* 限制最大宽度 */
}
/* 1. 文字显示区域 */
#displayText {
font-size: 12rem; font-weight: 900; color: #000;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
font-family: "Microsoft YaHei", sans-serif;
line-height: 1;
display: block; /* 默认显示 */
}
/* 2. 图片显示区域 (默认隐藏) */
#displayImage {
display: none; /* 默认隐藏 */
max-width: 100%; /* 宽度自适应 */
max-height: 60vh; /* 高度限制，防止超出屏幕 */
border: 5px solid white; /* 加个白边框好看点 */
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* 3. 控制栏样式 */
.control-bar {
background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
padding: 10px;
border-radius: 8px;
display: flex; gap: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
input {
padding: 8px; border: 1px solid #ccc; border-radius: 4px;
width: 300px; /* 输入框宽度 */
}
button {
background-color: #e60012; color: white; border: none;
padding: 8px 15px; border-radius: 4px; cursor: pointer;
font-weight: bold;
}
button:hover { background-color: #c4000f; }
</style>
</head>
<body>
<div class="container">
<div id="displayText">中国</div>
<img id="displayImage" src="" alt="课件图片">
<div class="control-bar">
<input type="text" id="urlInput" placeholder="在此粘贴图片 URL (https://...)">
<button onclick="loadImage()">加载图片</button>
<button onclick="resetText()" style="background-color:#333;">恢复文字</button>
</div>
</div>
<script>
function loadImage() {
var url = document.getElementById('urlInput').value;
var textDiv = document.getElementById('displayText');
var imgTag = document.getElementById('displayImage');
if (!url) {
alert("请先粘贴图片链接！");
return;
}
// 切换显示状态：隐藏字，显示图
textDiv.style.display = 'none';
imgTag.style.display = 'block';
// 设置图片源
imgTag.src = url;
// 错误处理：如果链接是坏的
imgTag.onerror = function() {
alert("图片加载失败，请检查链接是否正确 (必须是 https 开头)");
// 恢复显示文字
resetText();
};
}
function resetText() {
document.getElementById('displayText').style.display = 'block';
document.getElementById('displayImage').style.display = 'none';
document.getElementById('urlInput').value = ''; // 清空输入框
}
</script>
</body>
</html>怎么使用这个版本？
- 把这段代码放入 UE。
- 你在浏览器或者记事本里，复制你之前那个 PPT 图片的长链接 (例如
https://cdncs.101.com/.../video.jpeg)。 - 在 UE 的画面里，点击那个白色输入框，按下 Ctrl+V 粘贴链接。
- 点击 红色按钮。
- 原本的"中国"就会变成你的 PPT 图片。
这是在无法破解 UE 文件权限限制下的最佳交互方案。
# 自动读取幻灯片文件夹
```bash
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动加载PPT</title>
<style>
/* 1. 基础透明设置 */
html, body {
margin: 0; padding: 0; width: 100%; height: 100%;
background: transparent !important; /* 核心：背景透明 */
overflow: hidden;
font-family: "Microsoft YaHei", sans-serif;
user-select: none; /* 防止选中文字变蓝 */
}
/* 2. 主布局：右侧显示 */
.container {
position: absolute;
top: 50%;
right: 50px; /* 靠右距离 */
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end; /* 内容右对齐 */
gap: 15px;
max-width: 900px;
}
/* 3. 图片展示框 */
#slideImage {
max-width: 100%;
height: auto;
max-height: 70vh; /* 最大高度占屏幕70% */
border: 4px solid #fff;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
display: block;
background-color: rgba(0,0,0,0.5); /* 图片加载前的底色 */
}
/* 4. 底部控制条 */
.controls {
background: rgba(0, 0, 0, 0.8);
padding: 10px 20px;
border-radius: 30px;
display: flex;
gap: 15px;
align-items: center;
color: white;
backdrop-filter: blur(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* 按钮样式 */
button {
background-color: #444;
color: white;
border: 1px solid #666;
padding: 8px 20px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
outline: none;
}
button:hover { background-color: #666; border-color: #888; }
button:active { transform: scale(0.95); }
/* 翻页计数器 */
.counter { font-size: 1.2rem; min-width: 80px; text-align: center; font-variant-numeric: tabular-nums;}
/* 错误提示文字 */
#errorMsg {
color: yellow;
font-size: 14px;
background: rgba(255,0,0,0.6);
padding: 5px;
border-radius: 4px;
display: none; /* 默认隐藏 */
max-width: 400px;
}
</style>
</head>
<body>
<div class="container">
<img id="slideImage" src="" alt="PPT加载中...">
<div id="errorMsg">无法加载图片，请检查文件夹名称</div>
<div class="controls">
<button onclick="changeSlide(-1)">上一页</button>
<div class="counter" id="pageCounter">1 / 20</div>
<button onclick="changeSlide(1)">下一页</button>
</div>
</div>
<script>
// ================= 配置区域 =================
// 文件夹名称 (必须和你的文件夹名一模一样)
var folderName = "3电动机_1765942917";
// 图片数量 (你截图里看到是20张)
var totalSlides = 20;
// 图片前缀 (例如：幻灯片1.png 中的 "幻灯片")
var filePrefix = "幻灯片";
// 图片后缀 (例如 .png 或 .jpg)
var fileExtension = ".png";
// ===========================================
var currentIndex = 1; // 当前第几页
var imgElement = document.getElementById('slideImage');
var counterElement = document.getElementById('pageCounter');
var errorMsg = document.getElementById('errorMsg');
// 初始化：加载第一张图
loadSlide(currentIndex);
// 加载图片的函数
function loadSlide(index) {
// 拼接路径： 文件夹/幻灯片X.png
// 使用 encodeURIComponent 确保中文字符在某些浏览器里不乱码
var path = folderName + "/" + filePrefix + index + fileExtension;
// 如果你的环境对中文路径支持不好，可以尝试手动编码，通常现代浏览器直接写中文没事
// var path = encodeURIComponent(folderName) + "/" + encodeURIComponent(filePrefix) + index + fileExtension;
imgElement.src = path;
counterElement.innerText = index + " / " + totalSlides;
// 隐藏错误信息
errorMsg.style.display = 'none';
}
// 翻页函数
function changeSlide(direction) {
var newIndex = currentIndex + direction;
// 边界检查：不能小于1，不能大于总数
if (newIndex >= 1 && newIndex <= totalSlides) {
currentIndex = newIndex;
loadSlide(currentIndex);
}
}
// 监听图片加载错误（比如文件夹名字写错了）
imgElement.onerror = function() {
errorMsg.style.display = 'block';
errorMsg.innerText = "加载失败：" + imgElement.src + "\n请确认 index.html 是否在文件夹旁边。";
};
// 支持键盘左右键翻页
document.addEventListener('keydown', function(e) {
if (e.key === "ArrowRight") changeSlide(1);
if (e.key === "ArrowLeft") changeSlide(-1);
});
</script>
</body>
</html>幻灯片自动轮播
bash
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动轮播PPT</title>
<style>
/* 1. 基础透明设置 */
html, body {
margin: 0; padding: 0; width: 100%; height: 100%;
background: transparent !important;
overflow: hidden;
font-family: "Microsoft YaHei", sans-serif;
user-select: none;
}
/* 2. 主布局 */
.container {
position: absolute;
top: 50%;
right: 50px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 15px;
max-width: 900px;
}
/* 3. 图片框 */
#slideImage {
max-width: 100%;
height: auto;
max-height: 70vh;
border: 4px solid #fff;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
display: block;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.3s; /* 增加一点淡入淡出效果 */
}
/* 4. 控制条 */
.controls {
background: rgba(0, 0, 0, 0.8);
padding: 10px 20px;
border-radius: 30px;
display: flex;
gap: 15px;
align-items: center;
color: white;
backdrop-filter: blur(5px);
}
button {
background-color: #444;
color: white;
border: 1px solid #666;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
outline: none;
min-width: 80px;
}
button:hover { background-color: #666; border-color: #888; }
button:active { transform: scale(0.95); }
/* 特殊样式的自动播放按钮 */
#autoBtn {
background-color: #e60012; /* 红色表示正在播放 */
border-color: #e60012;
}
#autoBtn.paused {
background-color: #28a745; /* 绿色表示点击开始 */
border-color: #28a745;
}
.counter { font-size: 1.2rem; min-width: 80px; text-align: center; font-variant-numeric: tabular-nums;}
#errorMsg {
color: yellow;
font-size: 14px;
background: rgba(255,0,0,0.8);
padding: 10px;
border-radius: 4px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<img id="slideImage" src="" alt="加载中...">
<div id="errorMsg"></div>
<div class="controls">
<button id="autoBtn" onclick="toggleAutoPlay()">⏸ 暂停</button>
<span style="width:1px; height:20px; background:#666; margin:0 5px;"></span> <button onclick="changeSlide(-1)">上一页</button>
<div class="counter" id="pageCounter">1 / 20</div>
<button onclick="changeSlide(1)">下一页</button>
</div>
</div>
<script>
// ================= 配置区域 =================
var folderName = "3电动机_1765942917"; // 文件夹名
var totalSlides = 20; // 总张数
var filePrefix = "幻灯片"; // 图片前缀
var fileExtension = ".png"; // 图片后缀 (.png 或 .jpg)
var intervalTime = 2000; // 自动播放间隔 (2000毫秒 = 2秒)
// ===========================================
var currentIndex = 1;
var timer = null; // 定时器变量
var isPlaying = true; // 默认是否开启自动播放
var imgElement = document.getElementById('slideImage');
var counterElement = document.getElementById('pageCounter');
var autoBtn = document.getElementById('autoBtn');
var errorMsg = document.getElementById('errorMsg');
// 初始化
loadSlide(currentIndex);
startTimer(); // 启动自动播放
// 核心：加载图片
function loadSlide(index) {
var path = folderName + "/" + filePrefix + index + fileExtension;
imgElement.src = path;
counterElement.innerText = index + " / " + totalSlides;
errorMsg.style.display = 'none';
}
// 核心：切换图片 (带循环逻辑)
function changeSlide(direction) {
var newIndex = currentIndex + direction;
// 循环逻辑：
// 如果超过最后一张 -> 回到第一张
if (newIndex > totalSlides) {
newIndex = 1;
}
// 如果小于第一张 -> 去到最后一张
else if (newIndex < 1) {
newIndex = totalSlides;
}
currentIndex = newIndex;
loadSlide(currentIndex);
}
// ============ 自动播放控制逻辑 ============
// 启动定时器
function startTimer() {
if (timer) clearInterval(timer);
timer = setInterval(function() {
changeSlide(1); // 每隔2秒，相当于点一次"下一页"
}, intervalTime);
// 更新按钮状态
autoBtn.innerHTML = "⏸ 暂停";
autoBtn.className = ""; // 红色样式
isPlaying = true;
}
// 停止定时器
function stopTimer() {
if (timer) {
clearInterval(timer);
timer = null;
}
// 更新按钮状态
autoBtn.innerHTML = "▶ 继续";
autoBtn.className = "paused"; // 绿色样式
isPlaying = false;
}
// 切换开关
function toggleAutoPlay() {
if (isPlaying) {
stopTimer();
} else {
startTimer();
}
}
// 鼠标悬停在图片上时，临时暂停（可选功能，提升体验）
imgElement.onmouseenter = function() { stopTimer(); };
imgElement.onmouseleave = function() { if(isPlaying) startTimer(); }; // 注意：这里逻辑为了简单，鼠标移出默认会恢复播放
// 错误处理
imgElement.onerror = function() {
errorMsg.style.display = 'block';
errorMsg.innerText = "找不到图片: " + imgElement.src;
stopTimer(); // 出错了就别自动播了
};
</script>
</body>
</html>