84 lines
2.9 KiB
HTML
84 lines
2.9 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>本地网页示例</title>
|
||
<style>
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 24px; }
|
||
h1 { margin-bottom: 8px; }
|
||
.card { border: 1px solid #ddd; border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
||
button, a.btn { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid #ccc; text-decoration: none; color: #333; background: #f7f7f7; margin-right: 8px; }
|
||
button:hover, a.btn:hover { background: #eee; }
|
||
pre { background: #f5f5f5; padding: 12px; border-radius: 8px; overflow: auto; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>本地网页示例</h1>
|
||
<p>用于演示：右键菜单、下载拦截（data/blob/同域）、关于页面。</p>
|
||
|
||
<div class="card">
|
||
<h3>同域下载（静态文件）</h3>
|
||
<p>
|
||
<a class="btn" href="sample.txt" download>下载文本 sample.txt</a>
|
||
<a class="btn" href="images/sample.png" download>下载图片 sample.png</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Data URL 下载（内联文本）</h3>
|
||
<button onclick="downloadDataUrl()">下载 data: 文本</button>
|
||
<script>
|
||
function downloadDataUrl(){
|
||
const content = encodeURIComponent('这是来自 data:URL 的文本内容\nHello WebView2!');
|
||
const url = 'data:text/plain;charset=utf-8,' + content;
|
||
const a = document.createElement('a');
|
||
a.href = url; a.download = 'data_text.txt';
|
||
a.click(); a.remove();
|
||
}
|
||
</script>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Blob URL 下载（运行时生成）</h3>
|
||
<button onclick="downloadBlob()">下载 blob: 文本</button>
|
||
<script>
|
||
function downloadBlob(){
|
||
const blob = new Blob(['这是来自 blob:URL 的文本内容\nBlob Download Demo'], { type: 'text/plain' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url; a.download = 'blob_text.txt';
|
||
a.click(); a.remove(); URL.revokeObjectURL(url);
|
||
}
|
||
</script>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>右键菜单测试</h3>
|
||
<p>在页面空白处点击右键，弹出自定义菜单（返回/刷新/关于）。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>关于页面</h3>
|
||
<a class="btn" href="#" onclick="openAbout()">打开关于</a>
|
||
<script>
|
||
function openAbout(){
|
||
if (window.chrome && window.chrome.webview) {
|
||
window.chrome.webview.postMessage({ type: 'show_about' });
|
||
} else {
|
||
window.open('about.html', '_blank');
|
||
}
|
||
}
|
||
</script>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>示例文件内容</h3>
|
||
<pre>
|
||
sample.txt 将在同目录下提供。
|
||
images/sample.png 将作为占位图片。
|
||
</pre>
|
||
</div>
|
||
</body>
|
||
</html>
|