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>