如何将数据从加载到 div 的网页传递到加载它的页面

Question

我有两个 web 申请。 我通过 div 将项目 1 加载到项目 2 中。 现在我想将数据从项目 1 传递到项目 2。但我不知道如何 go 了解它。 有人可以帮帮我吗？

这是代码：

<!Doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
</head>

<body>

  <script>
    (function () {
      var externalEl = document.createElement('div'); // is a node
      externalEl.innerHTML = '<div><object type="text/html" data="http://localhost:3333/payment/P2ZpcnN0TmFtZT1UaW1vdGh5Jmxhc3ROYW1lPVVpamlhdGFsb3ImcGhvbmU9MDgxNjk1MjI3OTAmZW1haWw9dGltb3RoeXVpamlhdGFsb3JAeWFob28uY29tJmNvdW50cnk9TmlnZXJpYSZhbW91bnQ9NTAmY3VycmVuY3k9TkdOJmRpdkNvZGU9MDEmaXRlbUNvZGU9MzAwMDAwMDAwMDAwMDAwJnJlZGlyVXJsPWh0dHA6Ly8xMjcuMC4wLjEvcG9zdC9ndzIucGhwJnBheW1lbnRUaXRsZT1TdGFuYmljJmxvZ29QYXRoPWh0dHBzOi8vcmNjZ2V0b3VyLm9yZy9pc3JhZWwyMDIwL3RlbXBsYXRlL2Fzc2V0cy9pbWcvbG9nby5wbmcmbWVyY2hhbnRSZWY9R0YxMjMmdHlwZT1jYXJkJnNob3dNb2RhbD0x" width="800px" height="600px" style="overflow:auto;border:5px ridge blue"></object></div>';

      document.body.appendChild(externalEl);

      // I want to know whether user clicked on male or female from the page I loaded into the above div
    })();
  </script>
</body>

</html>

这是项目 1 如何加载到项目 2 中的屏幕截图：

Answer 1

我猜最终产品会比简单的男性/女性选择稍微复杂一些（否则我建议只在项目 2 中处理它，而不是将项目 1 嵌套为 iFrame）。 不知道您希望嵌套部分如何交互的具体细节； 我只能举一个广泛的例子。

在项目 1 中，您需要在相关的 Javascript 块中按照这些行添加一些内容：

window.parent.postMessage({ message: "getAppData", value: MyDataToPass }, "*");

因为 iframe 本质上只是嵌套在页面中的新浏览器 session - 这会将消息传递到包含您指定的数据的外部页面。

在项目 2 中，您想用以下内容替换问题中的内容：

<html>
  <head>
  <title>IFrame Example</title>
  </head>
<body>
<iframe src="inputForm.html" >
</iframe>
</body>
</html>

您需要将 src 指向项目 1 中的相关 URL。

然后在页面的 javascript 中，您将创建一个事件侦听器。

window.addEventListener("message", this.receiveMessage, false);

用对应的function来处理数据。

 receiveMessage = (event: any) => {
    const message = event.data.message;

    switch (message) {
      case 'getAppData':
        Process the data here
        break;
    }
    ...
  }

如何将数据从加载到 div 的网页传递到加载它的页面

问题描述

1 个解决方案

解决方案1
0 2021-08-13 14:51:57

如何将数据从加载到 div 的网页传递到加载它的页面

问题描述

1 个解决方案

解决方案1 0 2021-08-13 14:51:57

解决方案1
0 2021-08-13 14:51:57