I tried using a webview in a an Electron app to implement a simple browser here's the index.html for that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'">
<script src="https://cdn.tailwindcss.com"></script>
<title>Hnaya Browser</title>
</head>
<body class="bg-gray-900 text-white">
<div class="w-full h-12 bg-gray-800 flex items-center px-2 space-x-2">
<button id="back">←</button>
<button id="forward">→</button>
<button id="reload">⟳</button>
<input id="url" type="text" placeholder="Enter URL and press Enter">
</div>
<webview id="browser" src="https://www.google.com" style="width:100vw; height:94vh"></webview>
<script>
const webview = document.getElementById("browser");
const urlInput = document.getElementById("url");
const backBtn = document.getElementById("back");
const forwardBtn = document.getElementById("forward");
const reloadBtn = document.getElementById("reload");
// Load entered URL
urlInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
let url = urlInput.value.trim();
if (!/^https?:\/\//i.test(url)) {
url = "https://" + url;
}
webview.src = url;
}
});
// Update URL bar when navigation changes
const updateURL = () => {
urlInput.value = webview.getURL();
};
webview.addEventListener("did-navigate", updateURL);
webview.addEventListener("did-navigate-in-page", updateURL);
// Navigation controls
backBtn.addEventListener("click", () => webview.canGoBack() && webview.goBack());
forwardBtn.addEventListener("click", () => webview.canGoForward() && webview.goForward());
reloadBtn.addEventListener("click", () => webview.reload());
</script>
</body>
</html>
I tried to do the same thing but in a Electron + NextJS app. The webpage does render, but I can't access to attributes and methods of a webview. Can you help me fix it?
Here's the code that I'm using for it
"use client";
import { useEffect } from "react";
export default function Browser() {
let webviewElement: any = null;
useEffect(() => {
webviewElement = document.querySelector("webview");
}, []);
const goBack = () => {
if (webviewElement) {
webviewElement.goBack();
}
};
const goForward = () => {
if (webviewElement) {
webviewElement.goForward();
}
};
const reload = () => {
if (webviewElement) {
webviewElement.reload();
}
};
const loadURL = (url: string) => {
if (webviewElement) {
webviewElement.src = url;
}
};
const handleSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
const url = (event.target as HTMLInputElement).value;
loadURL(url);
}
};
return (
<div className="flex flex-col h-screen">
<nav className="w-screen bg-black h-[6vh] flex items-center px-4 gap-4">
<img
className="hover:cursor-pointer hover:scale-110 h-[3vh]"
src="/icons/arrow.left.svg"
onClick={goBack}
/>
<img
className="hover:cursor-pointer hover:scale-110 h-[3vh]"
src="/icons/arrow.right.svg"
onClick={goForward}
/>
<img
className="hover:cursor-pointer hover:scale-110 h-[4vh]"
src="/icons/arrow.clockwise.svg"
onClick={reload}
/>
<img
className="hover:cursor-pointer hover:scale-110 h-[4vh]"
src="/icons/house.svg"
onClick={() => loadURL("https://google.com")}
/>
<input
className="flex-grow p-2 rounded-lg bg-gray-300 text-black h-[4vh]"
onKeyDown={handleSearch}
/>
<img
className="hover:cursor-pointer hover:scale-110 h-[4vh]"
src="/icons/magnifyingglass.svg"
onClick={() => {
const input = document.querySelector("input");
if (input) {
loadURL(input.value);
}
}}
/>
</nav>
<webview
src="https://google.com"
className="h-[94vh] w-[100vw]"
></webview>
</div>
);
}
I tried both useRef and querySelector and they didn't allow me to access the attributes and methods of a webview
