电子：无法读取未定义的属性（Reading＆＃x27; Recect＆＃x27;）| IPC无法接收我通过html iframe发送的args

发布于 2025-02-09 03:59:45 字数 4787 浏览 0 评论 0原文

我正在尝试通过我的预加载脚本通过IPCMAIN将LightMode和语言数据发送到IpCrenderer：

PRELOAD.JS：

const { contextBridge, ipcRenderer } = require("electron");

const ipc = {
  render: {
    send: ["mainMenuUpdate"],
    receive: ["windowStats"],
  },
};

contextBridge.exposeInMainWorld("ipcRender", {
  // From render to main.
  send: (channel, args) => {
    let validChannels = ipc.render.send;
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, args);
    }
  },
  // From main to render.
  receive: (channel, args) => {
    let validChannels = ipc.render.receive;
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, args);
    }
  },
});

我以下发送数据：

mainmenu.js：

window.ipcRender.send('mainMenuUpdate', {
          // windowSkin and currentLanguage are both coming from the previous window update 
          // and are an object with hexvalues and string respectively. Doesn't matter in this 
          // case
          currentSkin: windowSkin,
          currentLanguage,
   })

请注意，请注意这一点。一直在为我更新的所有其他窗口工作，但不是一个窗口。

中回答了这一点：

ipcMain.on('mainMenuUpdate', (event, args) => {
  console.log(args);
  // outputs correcly
  mainWindow.webContents.send("windowStats", args);
});

我在main.js

let currentLanguage;
let windowSkin;

window.ipcRender.receive("windowStats", (event, windowArgs) => {
     console.log(windowArgs);
     // does not output anything because of double error
      windowSkin = windowArgs.currentSkin;
      currentLanguage = windowArgs.currentLanguage;
      updateColors(windowArgs.currentSkin);
       langUpdate(currentLanguage);
   });

从mainmenu.js发送它，在main.js中接收到相同的日志，就在我使用mainwindow.webcontents.send.send（//）发送之前（// ...），但由于错误而没有日志。

unturew typeError：无法读取未定义的属性（阅读 '接收'）在mypage.js：18：18（匿名 @ mypage.js：18）

我得到了两次，如果有帮助的话，完全相同的错误。在我通过IPC发送之前和之后，我还尝试在新的HTML文件中加载。

mypage.html看起来如下：

<body>
    <main class="main-container">
        <section class="left-column">
            <div class="my-library-container">
                <div class="left-column-btns myLibrary-btn" data-translation-key data-string="myPage:myLibrary-btn">??MY
                    LIBRARY
                </div>
            </div>
            <div class="collections-container">
                <div class="left-column-btns collections-btn" data-translation-key data-string="myPage:collections-btn">
                    ??COLLECTIONS</div>
            </div>
        </section>
        <section class="main-column">
            <iframe class="main-screen" src="../myPage/myLibrary.html" frameborder="0"></iframe>
        </section>
        <section class="right-column"></section>
    </main>

    <script defer src="../../assets/js/myPage/myPage.js"></script>
    <script defer src="../../constants/colors.js"></script>
    <script defer src="../../constants/languages.js"></script>
</body>

我在iframe中显示的是这样的：

<body>
    <main class="main-container">
        <iframe class="main-window" src="myPage/myPage.html" frameborder="0"></iframe>
    </main>

    <script defer src="../assets/js/mainMenu.js"></script>
    <script defer src="../constants/colors.js"></script>
    <script defer src="../constants/languages.js"></script>
</body>

可能会或可能不会造成的问题，即JavaScript似乎已经加载了即使将js文件推迟了，html也是如此。

mypage.js ex。

const myLibraryBtn = document.querySelector('.myLibrary-btn')

myLibraryBtn.classList.add('activated')

并获取此错误：

unturew typeError：无法阅读null的适当性（阅读 'classList'）at ...

我会很乐意详细说明并扩展这个问题，因为我不知道我什至应该寻找什么以及在哪里。

更新：由于我一直在进行过度测试时，我得出的结论是，在渲染器是iframe时，我无法通过IPC（主要 - ＆gt; Renderer）获得任何东西。我可以在没有iframe的情况下打开一个按钮以正常更新窗口，即使我仍然得到一个

unturew typeError：无法读取未定义的属性（阅读 “接收”）在mypage.js ....
上

错误。但这似乎并没有干扰我的updateColors（）和langupdate（）函数，这些功能正确显示了HTML。因此，主要问题是我无法通过mainmenuupdate频道发送任何内容，并在显示mypage.html iframe中显示上述两个错误，如上所述。。因此，我仍然在两种情况下都会收到错误，而两次console.log（）不起作用，一次使用按钮而不是iframe，它给出一个此类错误和console.log（）均具有updateColor（）和langupdate（） functions的ARG。

原文

I am trying to send lightmode and language data through ipcMain to ipcRenderer through my preload script:

Preload.js:

const { contextBridge, ipcRenderer } = require("electron");

const ipc = {
  render: {
    send: ["mainMenuUpdate"],
    receive: ["windowStats"],
  },
};

contextBridge.exposeInMainWorld("ipcRender", {
  // From render to main.
  send: (channel, args) => {
    let validChannels = ipc.render.send;
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, args);
    }
  },
  // From main to render.
  receive: (channel, args) => {
    let validChannels = ipc.render.receive;
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, args);
    }
  },
});

I send the data like this:

mainMenu.js:

window.ipcRender.send('mainMenuUpdate', {
          // windowSkin and currentLanguage are both coming from the previous window update 
          // and are an object with hexvalues and string respectively. Doesn't matter in this 
          // case
          currentSkin: windowSkin,
          currentLanguage,
   })

Note that this has been working for all other windows I have updated but not this one.

I recieve this no problem in main.js as follows:

ipcMain.on('mainMenuUpdate', (event, args) => {
  console.log(args);
  // outputs correcly
  mainWindow.webContents.send("windowStats", args);
});

and then sends it away through windowStats to myPage.js:

let currentLanguage;
let windowSkin;

window.ipcRender.receive("windowStats", (event, windowArgs) => {
     console.log(windowArgs);
     // does not output anything because of double error
      windowSkin = windowArgs.currentSkin;
      currentLanguage = windowArgs.currentLanguage;
      updateColors(windowArgs.currentSkin);
       langUpdate(currentLanguage);
   });

I get a log when sending it from mainMenu.js, I get the same log when received in main.js, just before I send it with mainWindow.webcontents.send(//...) but no log because of the error.

Uncaught TypeError: Cannot read properties of undefined (reading
'receive') at myPage.js:18:18 (anonymous @ myPage.js:18)

I get this two times, exactly the same error if that would help.
I have also tried to load in the new html file both before and after I send it through IPC.

The myPage.html looks as follows:

<body>
    <main class="main-container">
        <section class="left-column">
            <div class="my-library-container">
                <div class="left-column-btns myLibrary-btn" data-translation-key data-string="myPage:myLibrary-btn">??MY
                    LIBRARY
                </div>
            </div>
            <div class="collections-container">
                <div class="left-column-btns collections-btn" data-translation-key data-string="myPage:collections-btn">
                    ??COLLECTIONS</div>
            </div>
        </section>
        <section class="main-column">
            <iframe class="main-screen" src="../myPage/myLibrary.html" frameborder="0"></iframe>
        </section>
        <section class="right-column"></section>
    </main>

    <script defer src="../../assets/js/myPage/myPage.js"></script>
    <script defer src="../../constants/colors.js"></script>
    <script defer src="../../constants/languages.js"></script>
</body>

which I show inside an iframe like this:

<body>
    <main class="main-container">
        <iframe class="main-window" src="myPage/myPage.html" frameborder="0"></iframe>
    </main>

    <script defer src="../assets/js/mainMenu.js"></script>
    <script defer src="../constants/colors.js"></script>
    <script defer src="../constants/languages.js"></script>
</body>

What may or may not contribute to the problem is that it seems like the javascript is loaded before the HTML even when JS file is deferred.

myPage.js ex.

const myLibraryBtn = document.querySelector('.myLibrary-btn')

myLibraryBtn.classList.add('activated')

and get this error:

Uncaught TypeError: Cannot read properies of null (reading
'classList') at ...

I will happily elaborate and extend this question because I have no idea what I even should look for and where.

UPDATE:
As I've been doing excessive testing I have concluded that I can't get anything through the ipc (main --> renderer) while the renderer is an iframe. I can put in a button to update the window normally without iframe, even though I still get a

Uncaught TypeError: Cannot read properties of undefined (reading
'receive') at myPage.js....

error. But it doesn't seem to interfere with my updateColors() and langUpdate() functions which show the HTML correctly. So the main problem is that I am not able to send anything through mainMenuUpdate channel and get anything but two errors as mentioned above while showing myPage.html inside an iframe. So I still get the error on both occations, while two times when console.log() does not work and one time when using a button instead of an iframe which gives one error of such and the console.log() with args for both updateColor() and langUpdate() functions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陪你搞怪i 2025-02-16 03:59:45

如 @午夜编码所述ipcrender.postmessage（频道，消息，[传输]）;作为IPC的替代方案，该替代品不能用于发送数据parent-parent-＆gt; iframe;我决定选择我从 and 此3分钟yt视频。

mainMenu.js：（渲染器）

// iframe \/
const mainWindow = document.querySelector('.main-window');

mainWindow.contentWindow.postMessage({
          channel: 'mainMenuUpdate',
          currentSkin: windowSkin,
          currentLanguage,
   }, '*')

，因为我直接通过渲染器发送它，所以我避免使用main.js的额外代码，因此它将发送到mypage.js （渲染器）并接收到：

window.addEventListener('message', (message) => {
    if(message.data.channel == 'mainMenuUpdate') {
        // I now have args over to `iframe`
        console.log(message.data)
        //... updateColors(...) langUpdater(...)
    }
});

我仍然不知道mylibrary按钮，但不是由iframe问题引起的。

As @midnight-coding mentioned about ipcRender.postMessage(channel, message, [transfer]); as an alternative to IPC which cannot be used to send data parent --> iframe; I decided to go with what I found from Mozilla webDocs and this 3 min YT video.

mainMenu.js: (renderer)

// iframe \/
const mainWindow = document.querySelector('.main-window');

mainWindow.contentWindow.postMessage({
          channel: 'mainMenuUpdate',
          currentSkin: windowSkin,
          currentLanguage,
   }, '*')

Because I send it directly through renderers I avoid extra code inside main.js, so it sends through to myPage.js (renderer) and receives it:

window.addEventListener('message', (message) => {
    if(message.data.channel == 'mainMenuUpdate') {
        // I now have args over to `iframe`
        console.log(message.data)
        //... updateColors(...) langUpdater(...)
    }
});

I still don't know about myLibrary button, but it is not caused by the iframe problem.

回复收藏 0 原文

~没有更多了~