js 往 iframe 注入 window.ethereum对象

java知路

于 2024-09-04 14:04:12 发布

阅读量478

点赞数 3

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_34874784/article/details/141892022

版权

要将 window.ethereum 对象注入到 iframe 中，你需要确保 iframe 中的内容支持与外部页面进行交互，并且 iframe 中的内容也支持以太坊钱包（如 MetaMask）的注入。以下是详细的步骤和示例代码。
步骤 1: 创建 iframe 和父页面
创建 iframe 元素：在父页面中创建一个 iframe 元素。
获取 iframe 的窗口对象：通过 contentWindow 或 contentDocument.defaultView 获取 iframe 的窗口对象。
注入 window.ethereum 对象：将父页面中的 window.ethereum 对象注入到 iframe 中。
示例代码
假设你有一个 Vue 应用，其中包含一个 iframe，并且你想将 window.ethereum 对象注入到 iframe 中。
1. 创建 Vue 组件模板

<template>
  <div>
    <iframe ref="myIframe" src="iframe-content.html" width="100%" height="400px"></iframe>
    <button @click="injectEthereum">注入 Ethereum 对象</button>
    <pre>{{ log }}</pre>
  </div>
</template>

2. 编写 Vue 组件逻辑

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      log: ''
    };
  },
  methods: {
    injectEthereum() {
      const iframe = this.$refs.myIframe;
      const iframeWindow = iframe.contentWindow || iframe.contentDocument.defaultView;

      // 检查父页面是否已经有 window.ethereum 对象
      if (window.ethereum) {
        // 将父页面的 window.ethereum 对象注入到 iframe 中
        iframeWindow.window.ethereum = window.ethereum;

        // 打印日志信息
        this.log = 'Ethereum 对象已注入到 iframe 中';
      } else {
        this.log = '父页面中没有找到 Ethereum 对象';
      }
    }
  }
};
</script>

3. iframe 内容页 (iframe-content.html)
在 iframe 内容页中，你可以检查 window.ethereum 是否已经注入。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iframe Content</title>
</head>
<body>
  <h1>Iframe Content</h1>
  <pre id="log"></pre>

  <script>
    // 检查 window.ethereum 是否存在
    if (window.ethereum) {
      document.getElementById('log').textContent = 'Ethereum 对象已注入到 iframe 中';
    } else {
      document.getElementById('log').textContent = 'Ethereum 对象未注入到 iframe 中';
    }
  </script>
</body>
</html>

解释
创建 iframe 元素：在 Vue 模板中创建一个 iframe 元素，并绑定一个 ref。
获取 iframe 的窗口对象：通过 contentWindow 或 contentDocument.defaultView 获取 iframe 的窗口对象。
注入 window.ethereum 对象：将父页面中的 window.ethereum 对象注入到 iframe 中。
检查注入情况：在 iframe 内容页中检查 window.ethereum 是否已经注入，并打印相关信息。
完整示例
Vue 组件模板

<template>
  <div>
    <iframe ref="myIframe" src="iframe-content.html" width="100%" height="400px"></iframe>
    <button @click="injectEthereum">注入 Ethereum 对象</button>
    <pre>{{ log }}</pre>
  </div>
</template>

Vue 组件逻辑

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      log: ''
    };
  },
  methods: {
    injectEthereum() {
      const iframe = this.$refs.myIframe;
      const iframeWindow = iframe.contentWindow || iframe.contentDocument.defaultView;

      // 检查父页面是否已经有 window.ethereum 对象
      if (window.ethereum) {
        // 将父页面的 window.ethereum 对象注入到 iframe 中
        iframeWindow.window.ethereum = window.ethereum;

        // 打印日志信息
        this.log = 'Ethereum 对象已注入到 iframe 中';
      } else {
        this.log = '父页面中没有找到 Ethereum 对象';
      }
    }
  }
};
</script>

iframe 内容页 (iframe-content.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iframe Content</title>
</head>
<body>
  <h1>Iframe Content</h1>
  <pre id="log"></pre>

  <script>
    // 检查 window.ethereum 是否存在
    if (window.ethereum) {
      document.getElementById('log').textContent = 'Ethereum 对象已注入到 iframe 中';
    } else {
      document.getElementById('log').textContent = 'Ethereum 对象未注入到 iframe 中';
    }
  </script>
</body>
</html>

通过这种方式，可以将 window.ethereum 对象从父页面注入到 iframe 中，并在 iframe 中检查其存在性。这样可以让你的 iframe 内容页也能访问和使用以太坊钱包的功能。