feat:新增多语言
This commit is contained in:
JiaJun
217
public/test-host.html
Normal file
217
public/test-host.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>PlayX Iframe Host Test</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f4f6fb;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 360px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.preview {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px;
|
||||
line-height: 1.6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: #111827;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: #e5e7eb;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.log {
|
||||
margin-top: 20px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: #0f172a;
|
||||
color: #dbeafe;
|
||||
font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
white-space: pre-wrap;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: calc(100vh - 48px);
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
iframe {
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<aside class="panel">
|
||||
<h1>PlayX Host Test</h1>
|
||||
<p>Use this page to test iframe embedding and the <code>PLAYX_READY</code> / <code>IFRAME_CONTEXT</code> handshake flow.</p>
|
||||
|
||||
<label>
|
||||
Username
|
||||
<input id="username" value="+60777777777" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Language
|
||||
<input id="language" value="zh-CN" />
|
||||
</label>
|
||||
|
||||
<div class="actions">
|
||||
<button id="send" class="primary" type="button">Send Context</button>
|
||||
<button id="reload" class="secondary" type="button">Reload Iframe</button>
|
||||
</div>
|
||||
|
||||
<div id="log" class="log"></div>
|
||||
</aside>
|
||||
|
||||
<main class="preview">
|
||||
<iframe id="playx-frame" title="PlayX App" src="/"></iframe>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const frame = document.getElementById('playx-frame')
|
||||
const usernameInput = document.getElementById('username')
|
||||
const languageInput = document.getElementById('language')
|
||||
const sendButton = document.getElementById('send')
|
||||
const reloadButton = document.getElementById('reload')
|
||||
const logNode = document.getElementById('log')
|
||||
const iframeOrigin = window.location.origin
|
||||
|
||||
function appendLog(message, data) {
|
||||
const stamp = new Date().toLocaleTimeString()
|
||||
const payload = data ? ` ${JSON.stringify(data, null, 2)}` : ''
|
||||
logNode.textContent = `[${stamp}] ${message}${payload}\n${logNode.textContent}`
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
return {
|
||||
type: 'IFRAME_CONTEXT',
|
||||
payload: {
|
||||
username: usernameInput.value.trim(),
|
||||
language: languageInput.value.trim(),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function sendContext() {
|
||||
const message = buildPayload()
|
||||
frame.contentWindow?.postMessage(message, iframeOrigin)
|
||||
appendLog('Sent IFRAME_CONTEXT to iframe', message)
|
||||
}
|
||||
|
||||
frame.addEventListener('load', () => {
|
||||
appendLog('Iframe loaded', {src: frame.getAttribute('src')})
|
||||
})
|
||||
|
||||
sendButton.addEventListener('click', () => {
|
||||
sendContext()
|
||||
})
|
||||
|
||||
reloadButton.addEventListener('click', () => {
|
||||
frame.contentWindow?.location.reload()
|
||||
appendLog('Requested iframe reload')
|
||||
})
|
||||
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.source === frame.contentWindow && event.data?.type === 'PLAYX_READY') {
|
||||
appendLog('Received PLAYX_READY from iframe', {
|
||||
origin: event.origin,
|
||||
data: event.data,
|
||||
})
|
||||
sendContext()
|
||||
return
|
||||
}
|
||||
|
||||
appendLog('Received postMessage on host page', {
|
||||
origin: event.origin,
|
||||
data: event.data,
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user