Çözüldü Electron JS tıklanan butona yeni pencere açmak

TeknoEmir · 2 Ağustos 2023

Merhaba arkadaşlar. Electron.js tıkladığım buton nasıl bana yeni pencere açar? Teşekkürler.

Şebnem Ferah · 2 Ağustos 2023

Electron'u projene dahil et, pencere oluştur.

JavaScript:

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
 const mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true // Gerekli ise.
 }
 });

 // Ana pencerenin içeriği (index.html gibi) yükleniyor.
 mainWindow.loadFile('index.html');


});

İlk pencerene buton ekle.

HTML:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Buton Örneği</title>
</head>
<body>
 <button id="newWindowButton">Yeni Pencere Aç</button>



 <script>
 // Butona tıklama olayını yakalayın.
 const newWindowButton = document.getElementById('newWindowButton');
 newWindowButton.addEventListener('click', () => {
 // Yeni pencereyi açan fonksiyonu çağırın.
 createNewWindow();
 });

 function createNewWindow() {
 const newWindow = new BrowserWindow({
 width: 600,
 height: 400,
 webPreferences: {
 nodeIntegration: true // Gerekli ise.
 }
 });

 // Yeni pencerenin içeriğini yükleyin (newWindow.html gibi)
 newWindow.loadFile('newWindow.html');

 // Yeni pencereyi kapatınca bellekten temizlenmesini sağlamak için olayı dinleyin.
 newWindow.on('closed', () => {
 newWindow = null;
 });
 }
 </script>
</body>
</html>

Yeni pencerenin içeriğini oluştu.

HTML:

<!-- newWindow.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Yeni Pencere</title>
</head>
<body>
 <h1>Yeni Pencere</h1>
 <p>Bu yeni bir pencere!</p>

</body>
</html>

Şebnem Ferah · 2 Ağustos 2023

Electron'u projene dahil et, pencere oluştur.

JavaScript:

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
 const mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true // Gerekli ise.
 }
 });

 // Ana pencerenin içeriği (index.html gibi) yükleniyor.
 mainWindow.loadFile('index.html');


});

İlk pencerene buton ekle.

HTML:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Buton Örneği</title>
</head>
<body>
 <button id="newWindowButton">Yeni Pencere Aç</button>



 <script>
 // Butona tıklama olayını yakalayın.
 const newWindowButton = document.getElementById('newWindowButton');
 newWindowButton.addEventListener('click', () => {
 // Yeni pencereyi açan fonksiyonu çağırın.
 createNewWindow();
 });

 function createNewWindow() {
 const newWindow = new BrowserWindow({
 width: 600,
 height: 400,
 webPreferences: {
 nodeIntegration: true // Gerekli ise.
 }
 });

 // Yeni pencerenin içeriğini yükleyin (newWindow.html gibi)
 newWindow.loadFile('newWindow.html');

 // Yeni pencereyi kapatınca bellekten temizlenmesini sağlamak için olayı dinleyin.
 newWindow.on('closed', () => {
 newWindow = null;
 });
 }
 </script>
</body>
</html>

Yeni pencerenin içeriğini oluştu.

HTML:

<!-- newWindow.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Yeni Pencere</title>
</head>
<body>
 <h1>Yeni Pencere</h1>
 <p>Bu yeni bir pencere!</p>

</body>
</html>

TeknoEmir · 2 Ağustos 2023

Şebnem Ferah dedi:

Electron'u projene dahil et, pencere oluştur.

JavaScript:

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
 const mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true // Gerekli ise.
 }
 });

 // Ana pencerenin içeriği (index.html gibi) yükleniyor.
 mainWindow.loadFile('index.html');


});

İlk pencerene buton ekle.

HTML:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Buton Örneği</title>
</head>
<body>
 <button id="newWindowButton">Yeni Pencere Aç</button>



 <script>
 // Butona tıklama olayını yakalayın.
 const newWindowButton = document.getElementById('newWindowButton');
 newWindowButton.addEventListener('click', () => {
 // Yeni pencereyi açan fonksiyonu çağırın.
 createNewWindow();
 });

 function createNewWindow() {
 const newWindow = new BrowserWindow({
 width: 600,
 height: 400,
 webPreferences: {
 nodeIntegration: true // Gerekli ise.
 }
 });

 // Yeni pencerenin içeriğini yükleyin (newWindow.html gibi)
 newWindow.loadFile('newWindow.html');

 // Yeni pencereyi kapatınca bellekten temizlenmesini sağlamak için olayı dinleyin.
 newWindow.on('closed', () => {
 newWindow = null;
 });
 }
 </script>
</body>
</html>

Yeni pencerenin içeriğini oluştu.

HTML:

<!-- newWindow.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Yeni Pencere</title>
</head>
<body>
 <h1>Yeni Pencere</h1>
 <p>Bu yeni bir pencere!</p>

</body>
</html>

Çok Teşekkür Ederim

Şebnem Ferah · 2 Ağustos 2023

TeknoEmir dedi:
Çok Teşekkür Ederim

Rica ederim.

TeknoEmir · 2 Ağustos 2023

Şebnem Ferah dedi:
Rica ederim.

Merhaba tekrardan.index.html sayfasındaki JavaScript kodlarını yazıyorum ama çalışmıyor maalesef. Require is not define hatasını alıyorum. NodeIntegrationuda true yaptım ama hala çalışmıyor.

Şebnem Ferah · 2 Ağustos 2023

TeknoEmir dedi:
Merhaba tekrardan.index.html sayfasındaki JavaScript kodlarını yazıyorum ama çalışmıyor maalesef. Require is not define hatasını alıyorum. NodeIntegrationuda true yaptım ama hala çalışmıyor.

index.html sayfasındaki JavaScript kodunda bir hata var. BrowserWindow normal web sayfalarında kullanılmaz. BrowserWindow sadece Electron uygulamasının ana sürecinde kullanılr.

BrowserWindow adında bir değişken olmadığı için ReferenceError: BrowserWindow is not defined hatasını alıyorsn. nodeIntegration özelliği ana süreçteki "main process" JavaScript dosyalarında kullanılabilir. Renderer sürecinde bu özelliği kullanmak doğru olmaz.

Electron'da main process'de oluşturulan pencerelerin renderer süreçteki JavaScript ile kullanmak gerektiğinde, Electronun ipcMain ve ipcRenderer modüllerini kullanmalısın.

Main process ve renderer süreçler arasında etkileşim için ipcMain ve ipcRenderer modüllerini kullanmalısın.

HTML:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Buton Örneği</title>
</head>
<body>
 <button id="newWindowButton">Yeni Pencere Aç</button>

 <script>
 // Butona tıklama olayını yakalayın.
 const newWindowButton = document.getElementById('newWindowButton');
 newWindowButton.addEventListener('click', () => {
   // Ana sürecle iletişim kurmak için ipcRenderer kullanılıyor.
   const { ipcRenderer } = require('electron');

   // Yeni pencereyi açma mesajını ana sürece gönder.
   ipcRenderer.send('open-new-window');
 });

 // Renderer süreçten alınan cevap üzerine yeni pencereyi açın.
 const { ipcRenderer } = require('electron');
 ipcRenderer.on('new-window-opened', (event, arg) => {
   if (arg === 'success') {
     console.log('Yeni pencere başarıyla açıldı.');
   } else {
     console.log('Yeni pencere açılırken bir hata oluştu.');
   }
 });
 </script>
</body>
</html>

Çözüldü Electron JS tıklanan butona yeni pencere açmak

Ayrıntılı düzenleme

TeknoEmir

Hectopat

Şebnem Ferah

Şebnem Ferah

Gigapat

TeknoEmir

Hectopat

Şebnem Ferah

Gigapat

TeknoEmir

Hectopat

Şebnem Ferah

Gigapat

Benzer konular