Flutter中点击Page2按钮在Page1添加容器的实现（含参数传递）

根据你的需求，下面分不同技术场景给出具体实现代码：

一、原生Web环境（无前端框架） #

如果是普通的多页面网站，推荐用postMessage（适用于弹窗/新窗口场景）或localStorage监听（适用于同域标签页场景）来实现跨页面通信。

Page2 按钮触发逻辑 #

<!-- page2.html -->
<button id="plusButton">添加蓝色容器</button>
<script>
document.getElementById('plusButton').addEventListener('click', () => {
  // 定义要传递的两个字符串参数
  const param1 = '自定义参数A';
  const param2 = '自定义参数B';

  // 场景1：page1通过window.open打开page2
  if (window.opener) {
    window.opener.postMessage(
      { type: 'addBlueBox', data: { param1, param2 } },
      '*' // 生产环境替换为page1的具体域名，比如'https://yourdomain.com'
    );
  } 
  // 场景2：page1和page2是同域下的不同标签页
  else {
    localStorage.setItem('pageAction', JSON.stringify({
      type: 'addBlueBox',
      data: { param1, param2 }
    }));
    // 触发storage事件需要值变化，所以主动清空触发
    setTimeout(() => localStorage.removeItem('pageAction'), 0);
  }
});
</script>

Page1 监听事件并添加容器 #

<!-- page1.html -->
<script>
// 监听postMessage消息
window.addEventListener('message', (event) => {
  // 生产环境务必验证event.origin，防止恶意消息
  if (event.data?.type === 'addBlueBox') {
    const { param1, param2 } = event.data.data;
    createBlueContainer(param1, param2);
  }
});

// 监听localStorage变化
window.addEventListener('storage', (event) => {
  if (event.key === 'pageAction' && event.newValue) {
    const action = JSON.parse(event.newValue);
    if (action.type === 'addBlueBox') {
      const { param1, param2 } = action.data;
      createBlueContainer(param1, param2);
    }
  }
});

// 创建蓝色容器的核心函数
function createBlueContainer(p1, p2) {
  const box = document.createElement('div');
  box.style.width = '100px';
  box.style.height = '100px';
  box.style.backgroundColor = 'blue';
  box.style.margin = '10px 0';
  box.style.padding = '5px';
  box.style.color = 'white';
  // 把参数显示在容器里方便验证
  box.innerText = `参数1: ${p1}\n参数2: ${p2}`;
  document.body.appendChild(box);
}
</script>

二、Vue 单页应用场景 #

如果是Vue项目，用事件总线（Vue3推荐mitt）来实现组件间通信最直接。

1. 安装依赖 #

npm install mitt

2. 创建全局事件总线 #

// src/utils/eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

3. Page2 组件（触发按钮） #

<template>
  <button @click="triggerAdd">添加蓝色容器</button>
</template>

<script setup>
import { eventBus } from '@/utils/eventBus';

const triggerAdd = () => {
  const param1 = 'Vue参数1';
  const param2 = 'Vue参数2';
  eventBus.emit('addBlueContainer', { param1, param2 });
};
</script>

4. Page1 组件（监听并创建容器） #

<template>
  <div ref="containerWrap"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { eventBus } from '@/utils/eventBus';

const containerWrap = ref(null);

onMounted(() => {
  eventBus.on('addBlueContainer', (data) => {
    const { param1, param2 } = data;
    const box = document.createElement('div');
    box.style.width = '100px';
    box.style.height = '100px';
    box.style.backgroundColor = 'blue';
    box.style.margin = '10px';
    box.style.color = 'white';
    box.innerText = `${param1}\n${param2}`;
    containerWrap.value.appendChild(box);
  });
});
</script>

三、React 单页应用场景 #

React里可以用自定义事件或者状态管理工具，这里给出自定义事件的简单实现：

Page2 组件 #

import React from 'react';

export default function Page2() {
  const handleClick = () => {
    const param1 = 'React参数A';
    const param2 = 'React参数B';
    // 派发自定义事件
    window.dispatchEvent(new CustomEvent('addBlueBox', {
      detail: { param1, param2 }
    }));
  };

  return <button onClick={handleClick}>添加蓝色容器</button>;
}

Page1 组件 #

import React, { useEffect, useRef } from 'react';

export default function Page1() {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleAddBox = (e) => {
      const { param1, param2 } = e.detail;
      const box = document.createElement('div');
      box.style.width = '100px';
      box.style.height = '100px';
      box.style.backgroundColor = 'blue';
      box.style.margin = '10px';
      box.style.color = 'white';
      box.innerText = `${param1}\n${param2}`;
      containerRef.current.appendChild(box);
    };

    window.addEventListener('addBlueBox', handleAddBox);
    // 组件卸载时移除监听
    return () => window.removeEventListener('addBlueBox', handleAddBox);
  }, []);

  return <div ref={containerRef}></div>;
}

内容的提问来源于stack exchange，提问作者carlosManta