vue3使其另一臺服務器上的x.html，實現x.html調用中的函數，并向其傳遞數據。

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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/78856.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/78856.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/78856.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！