amazon
/
copywriting_production


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!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>