首页预加载脚本中如何把变量传递到渲染层，并渲染在渲染层

预加载脚本中如何把变量传递到渲染层，并渲染在渲染层

时间: 2024-02-12 14:07:59 浏览: 67

预加载脚本可以通过 `contextBridge` API 将变量暴露给渲染进程，渲染进程就可以访问这些变量并将它们渲染在页面中。`contextBridge` API 可以防止渲染进程访问到预加载脚本中的不安全 API。以下是一个示例，演示了如何将 `myVariable` 变量暴露给渲染进程： ```javascript // preload.js const { contextBridge } = require('electron'); // 将 myVariable 暴露给渲染进程 const myVariable = 'Hello from preload script!'; contextBridge.exposeInMainWorld('myVariable', myVariable); ``` 在渲染进程中，可以通过 `window.myVariable` 访问 `myVariable` 变量，并将它渲染在页面中，例如： ```html  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Renderer Process</title> <script> // 在页面中访问 myVariable 变量 const myVariable = window.myVariable; document.write(myVariable); </script> </head> <body> </body> </html> ``` 在这个示例中，预加载脚本使用 `contextBridge.exposeInMainWorld` 方法将 `myVariable` 变量暴露给渲染进程。在渲染进程中，可以通过 `window.myVariable` 访问 `myVariable` 变量，并使用 `document.write` 方法将它渲染在页面中。需要注意的是，`contextBridge` API 是在 Electron 12 版本中引入的，如果你使用的是较旧的 Electron 版本，可能需要使用其他方式将变量传递给渲染进程。

阅读全文