当前位置：首页 > news >正文

vue3使其另一台服务器上的x.html，实现x.html调用中的函数，并向其传递数据。

news 来源：原创 2025/4/29 5:53:37

vue3例子

<template><div><iframe@load="loadIFreamSite"id="loadIframeSite":src="iframeSrc1"frameborder="0"scrolling="no"allowtransparency="true"style="width: 100%"></iframe><el-button @click="handleOther">调用其他服务器函数</el-button></div>
</template><script setup>
import { ref, onMounted } from 'vue';const iframeSrc1 = ref('http://192.168.1.13:5173/iframe.html'); // 确保指向 iframe.html// 模拟根据 JSON 控制
const controlJson = {'131_amxm_YX_4_yx1': '1','131_amxm_YX_4_yx2': '1','131_amxm_YC_4_yc1': '98.3',
};function loadIFreamSite() {const iframe = document.querySelector('#loadIframeSite');if (iframe && iframe.contentWindow) {iframe.contentWindow.postMessage(controlJson, 'http://192.168.1.13:5173'); // 指定目标 origin} else {console.error("Iframe not loaded or contentWindow not available.");}
}function handleOther() {console.log('window:', window);loadIFreamSite();
}
</script><style>
/* 添加一些样式 */
h1 {text-align: center;
}
button {display: block;margin: 20px auto;
}
</style>

html例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Iframe Content</title>
</head>
<body><h1>Iframe Content</h1><p id="receivedData">Waiting for data...</p><script>window.addEventListener('message', function(event) {// 验证消息来源 (重要安全步骤!)if (event.origin !== '你的主应用域名') { // 将 '你的主应用域名' 替换为你的主应用程序的实际域名console.warn('Message origin not trusted:', event.origin);return;}console.log('Received data from parent:', event.data);// 更新页面上的内容document.getElementById('receivedData').textContent = JSON.stringify(event.data); // 将数据转换为字符串显示});</script>
</body>
</html>