* refactor the infertace in index.html * adapt the change of interface in home page and vscode
		
			
				
	
	
		
			105 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			105 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<?php
 | 
						|
header("Access-Control-Allow-Origin: *");
 | 
						|
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
 | 
						|
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
 | 
						|
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
 | 
						|
?>
 | 
						|
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
 | 
						|
<head>
 | 
						|
    <meta charset="UTF-8">
 | 
						|
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
						|
    <title>DevStar Home</title>
 | 
						|
</head>
 | 
						|
 | 
						|
<body>
 | 
						|
    <iframe 
 | 
						|
    id="embedded-devstar"
 | 
						|
    src="http://localhost:8080/test/home.html" 
 | 
						|
    width="100%" 
 | 
						|
    height="100%"
 | 
						|
    frameborder="0"
 | 
						|
    style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;">
 | 
						|
    </iframe>
 | 
						|
 | 
						|
    <!-- <iframe 
 | 
						|
    id="embedded-devstar"
 | 
						|
    src="https://www.devstar.cn/spa.html" 
 | 
						|
    width="100%" 
 | 
						|
    height="100%"
 | 
						|
    frameborder="0"
 | 
						|
    style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;">
 | 
						|
    </iframe> -->
 | 
						|
 | 
						|
    <script>
 | 
						|
        const vscode = acquireVsCodeApi();
 | 
						|
 | 
						|
        function firstOpenRemoteFolder() {
 | 
						|
            vscode.postMessage({ command: 'firstOpenRemoteFolder', host: host, username: username, password: password, port: port, path: path });
 | 
						|
        }
 | 
						|
 | 
						|
        function openRemoteFolder() {
 | 
						|
            vscode.postMessage({ command: 'openRemoteFolder', host: host, path: path });
 | 
						|
        }
 | 
						|
 | 
						|
        function firstOpenRemoteFolderWithData(host, username, password, port, path) {
 | 
						|
            vscode.postMessage({ command: 'firstOpenRemoteFolder', host: host, username: username, password: password, port: port, path: path });
 | 
						|
        }
 | 
						|
 | 
						|
        function openRemoteFolderWithData(host, path) {
 | 
						|
            vscode.postMessage({ command: 'openRemoteFolder', host: host, path: path });
 | 
						|
        }
 | 
						|
 | 
						|
 | 
						|
        async function communicateVSCode(command, data) {
 | 
						|
            return new Promise((resolve, reject) => {
 | 
						|
                // request to vscode 
 | 
						|
                vscode.postMessage({ command: command, data: data })
 | 
						|
 | 
						|
                function handleResponse(event) {
 | 
						|
                    const jsonData = event.data;
 | 
						|
                    if (jsonData.command === command) {
 | 
						|
                        // console.log("communicateVSCode", jsonData.data)
 | 
						|
 | 
						|
                        // return vscode response
 | 
						|
                        window.removeEventListener('message', handleResponse) // 清理监听器
 | 
						|
                        resolve(jsonData.data)
 | 
						|
                    }
 | 
						|
                }
 | 
						|
 | 
						|
                window.addEventListener('message', handleResponse)
 | 
						|
 | 
						|
                setTimeout(() => {
 | 
						|
                    window.removeEventListener('message', handleResponse)
 | 
						|
                    reject('timeout')
 | 
						|
                }, 5000); // 5秒超时
 | 
						|
            })
 | 
						|
        }
 | 
						|
 | 
						|
        // 监听子页面的消息
 | 
						|
        window.addEventListener('message', async (event) => {
 | 
						|
            // 出于安全考虑,检查 event.origin 是否是你预期的源
 | 
						|
            // if (event.origin !== "http://expected-origin.com") {
 | 
						|
            //     return;
 | 
						|
            // }
 | 
						|
            try {
 | 
						|
                const jsonData = event.data;
 | 
						|
 | 
						|
                if (jsonData.target === 'vscode') {
 | 
						|
                    const actionFromHome = jsonData.action
 | 
						|
                    const dataFromHome = jsonData.data
 | 
						|
                    const dataFromVSCodeResponse = await communicateVSCode(actionFromHome, dataFromHome)
 | 
						|
                    
 | 
						|
                    var iframe = document.getElementById('embedded-devstar');
 | 
						|
                    if(iframe && iframe.contentWindow) {
 | 
						|
                        iframe.contentWindow.postMessage({action: actionFromHome, data: dataFromVSCodeResponse}, '*')
 | 
						|
                    }
 | 
						|
                }
 | 
						|
            } catch (error) {
 | 
						|
                console.error('Error parsing message:', error);
 | 
						|
            }
 | 
						|
        });
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
</html> |