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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Çözüm
Şebnem Ferah
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>
Tarihe göre sırala Puana göre sırala
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>
 
Artı 0 Eksi
Çözüm
Ş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>
Genişletmek için tıkla...
Çok Teşekkür Ederim🥰
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
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>
 
Artı 0 Eksi

Benzer konular

Konatus
Electron ile Masaüstü Programlama
Mesaj
5
Görüntüleme
1.084
kaan.w
K
tdbrogy
Butona link eklemek
Mesaj
3
Görüntüleme
312
tdbrogy
tdbrogy
0
Butona tuş atama
Mesaj
4
Görüntüleme
1.911
181019
1
TeknoEmir
Nest JS mi Next JS mi?
Mesaj
9
Görüntüleme
3.361
kaan.w
K
SadeceBirİnsanAHuman
  • Soru
Butona basınca form gönderiyor
Mesaj
8
Görüntüleme
965
Berkay Davas
Berkay Davas

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı