質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

1094閲覧

iframeを含むBrowserWindowを閉じようとしてもclosedイベントが発生しない

Praline

総合スコア46

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2021/06/14 12:24

編集2021/06/16 16:30

前提・実現したいこと

youtubeの動画を埋め込むため、BrowserWindowにiframeを含むhtmlソースを使用したいです。

発生している問題・エラーメッセージ

既存の動作しているソースに変更は加えず、html側にyoutubeのiframeソースをベタ書きしています。
このコードを追記した時に、MainProcessのclosedイベントが発生しません。

該当のソースコード

html

1//他のソースは省略 2//XXXXXXXXXXXは任意の動画ID 3<iframe type="text/html" width="640" height="360" src="https://www.youtube.com/embed/XXXXXXXXXXX?autoplay=0" frameborder="0"></iframe>

Javascript

1//RendererProcess 2$('#close-button').on('click', () => { 3 ipcRenderer.send('mainwindow_close'); 4});

javascript

1//MainProcess 2const {BrowserWindow, app, ipcMain} = require('electron'); 3const path = require('path'); 4 5let mainWindow; 6 7app.on('ready', function() { 8 mainWindow = new BrowserWindow({ 9 frame: false, 10 width: 300, 11 height: 300, 12 webPreferences: { 13 nodeIntegration: true, 14 contextIsolation: false 15 } 16 }); 17 18 mainWindow.loadURL('htmlFilePath');//htmlFilePathは任意の文字列 19 20 mainWindow.on('closed', function() { 21 //iframeを含むとここが実行されない 22 mainWindow = null; 23 }); 24}); 25app.on('window-all-closed', function () { 26 app.quit(); 27}); 28 29ipcMain.on('mainwindow_close', () => { 30 //ここは実行される 31 mainWindow.close(); 32});

試したこと

原因を探したのですが、iframeがあるときのみ発生する事象のようです。

補足情報(FW/ツールのバージョンなど)

Electron v13.1.1
Node.js v14.15.5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こちらの環境ではiframeの有無に関わらず
下記で'closed'と表示さました
一度最小コードで試してみては?

JavaScript

1//MainProcess 2ipcMain.handle('mainwindow_close', () => { 3 //ここの処理は実行される 4 mainWindow.close(); 5}); 6 7 8mainWindow.on('closed', () => { 9 console.log('closed'); 10 mainWindow = null; 11});
electron -v v12.0.0

追記

追記のcodeで確認してみたところ
//MainProcessframe: falseのコメントアウトの有無で差異がありました
確認なのですが、 mainWindow.close();は動きましたか?(画面は閉じましたか?)
こちらの環境では、ipcMain.handle部分にconsole.log('close');のようにした場合、'close'は表示されましたが、mainWindow.close();は動きませんでした。
※そのため、そもそも'closed'イベントが動作しない

また、読み込む前ならmainWindow.close();が走るので、それの影響でsrcの有無で差異が出たのでは…

iframeのオプションを設定すれば、回避できるかもしれませんが、BrowserViewで代替できるなら切り替えるのがいい気が…

投稿2021/06/16 13:16

編集2021/06/19 04:54
bbn16586

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Praline

2021/06/16 15:51

ありがとうございます、環境に起因する問題かもしれませんので、一度最小環境で試したいと思います。
Praline

2021/06/16 16:34

最小コードでも試したのですが、状況が改善されませんでした。 MainProcess側のコードを全て記載しました。 なおこちらのコードでも、iframeを含まないhtmlファイルを読み込んだ場合は正常に動作します。 また追加の症状となりますが、iframeタグがあっても、src属性に記載がない場合は問題なく動作し、 任意のURLを記載した場合、closedイベントが発生しませんでした。
Praline

2021/06/20 03:15

ご指摘の通り、closeは動きませんでした。 cssでデザインを制御している関係でiframeで埋め込みたかったのですが、提案の通りBrowserViewで修正できないか検討したいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問