|
|
@@ -0,0 +1,101 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>MHTML Renderer</title>
|
|
|
+ <script src="https://unpkg.com/mhtml2html@3.0.0/dist/mhtml2html.js"></script>
|
|
|
+ <style>
|
|
|
+ /* 保持原有样式不变 */
|
|
|
+ #loading {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="loading">加载中...</div>
|
|
|
+ <div id="content"></div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ document.addEventListener('DOMContentLoaded', () => {
|
|
|
+ const loader = document.getElementById('loading');
|
|
|
+ const contentDiv = document.getElementById('content');
|
|
|
+
|
|
|
+ // 新增：解析URL参数
|
|
|
+ function getUrlParameter(name) {
|
|
|
+ const params = new URLSearchParams(window.location.search);
|
|
|
+ return params.get(name);
|
|
|
+ }
|
|
|
+
|
|
|
+ async function renderMHTML(url) {
|
|
|
+ // 保持原有渲染逻辑不变
|
|
|
+ try {
|
|
|
+ const res = await fetch(url);
|
|
|
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
|
+ const mhtml = await res.text();
|
|
|
+
|
|
|
+ const windowProxy = mhtml2html.convert(mhtml, {
|
|
|
+ convertIframes: true,
|
|
|
+ parseDOM: html => {
|
|
|
+ const frame = document.createElement('iframe');
|
|
|
+ frame.style.display = 'none';
|
|
|
+ document.body.appendChild(frame);
|
|
|
+ frame.contentDocument.write(html);
|
|
|
+ return frame.contentWindow;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!windowProxy?.document?.documentElement) {
|
|
|
+ throw new Error('文档结构解析失败');
|
|
|
+ }
|
|
|
+
|
|
|
+ const renderFrame = document.createElement('iframe');
|
|
|
+ renderFrame.sandbox = 'allow-same-origin allow-scripts';
|
|
|
+ Object.assign(renderFrame.style, {
|
|
|
+ width: '100%',
|
|
|
+ height: '100vh'
|
|
|
+ });
|
|
|
+
|
|
|
+ contentDiv.innerHTML = '';
|
|
|
+ contentDiv.appendChild(renderFrame);
|
|
|
+ loader.style.display = 'none';
|
|
|
+
|
|
|
+ renderFrame.contentDocument.replaceChild(
|
|
|
+ windowProxy.document.documentElement,
|
|
|
+ renderFrame.contentDocument.documentElement
|
|
|
+ );
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ loader.innerHTML = `
|
|
|
+ <div style="color: red; padding: 20px; text-align: center">
|
|
|
+ <h3>渲染失败</h3>
|
|
|
+ <p>${error.message}</p>
|
|
|
+ <button onclick="location.reload()">点击重试</button>
|
|
|
+ </div>`;
|
|
|
+ console.error('[RENDER ERROR]', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 修改：从URL参数获取mhtml地址
|
|
|
+ const mhtmlUrl = getUrlParameter('url');
|
|
|
+ if (mhtmlUrl) {
|
|
|
+ renderMHTML(mhtmlUrl);
|
|
|
+ } else {
|
|
|
+ loader.innerHTML = `
|
|
|
+ <div style="padding: 20px; text-align: center">
|
|
|
+ <h3>缺少URL参数</h3>
|
|
|
+ <p>请使用 ?url= 参数指定MHTML文件地址</p>
|
|
|
+ <p>示例：${window.location.href}?url=http://s3.vs1.lan/public/amazone/copywriting_production/output/B0B658JC22/B0B658JC22.mhtml</p>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
