Multiple webviews with connected buttons

Question

0.00/5 (No votes)

See more:

I'm building an Electron app that has menu buttons on the top. The layout is similar to the following:

(Home) | (Print) | (Google) | (Stocks)

Each button should display the associated website in the main view via WebView.
Problem: The only button that works is the Home button. No other button displays its respective website.

What I have tried:

index.html:

HTML

<pre><!-- Topbar -->
      <div id="controls">
        <button id="home" title="Go Home">Home</button>
        <button id="print_button">Print</button>
        <button id="google_button">Google</button>
        <button id="stock_button">Check Pre-Market Stocks</button>
      </div>
      <!-- End topbar -->

      <!-- Webview -->
      <webview
        id="webview"
        autosize="on"
        src="https://media.istockphoto.com/photos/analyzing-samples-in-test-tube-backgrounds-picture-id1290116527?s=612x612"
        go-home="https://www.duckduckgo.com"
        go-google="https://www.google.com"
        go-stock="https://www.cnbc.com/pre-markets/"

      ></webview>

renderer.js:

JavaScript

const homeButton = () => {
  document.querySelector("#home").onclick = () => {
    const home = document.getElementById("webview").getAttribute("go-home");
    document.querySelector("webview").src = home;

  };
};
const googleButton = () => {
  document.querySelector("#google_button").onclick = () => {
    const google = document.getElementById("webview").getAttribute("go-google");
    document.querySelector("webview").src = google;

  };
};

const stockBtn = () => {
  document.querySelector("#stock_button").onclick = () => {
    const pass = document.getElementById("webview").getAttribute("go-stock");
    document.querySelector("webview").src = stock;

  };
};

window.onload = () => {
  calculateLayoutSize();
  homeButton();
  googleButton();
  stockBtn;
};

Posted 14-Feb-22 16:33pm

wifinut

Updated 16-Feb-22 10:44am

Sean Ewington

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-02-14T22:15:00

You're missing parentheses on the stockButton call. Aside from that, I can't see anything obviously wrong with your code.

However, you can simplify things with event delegation:

HTML

<!-- Topbar -->
<div id="controls">
    <button title="Go Home" data-url="https://www.duckduckgo.com">Home</button>
    <button id="print_button">Print</button>
    <button data-url="https://www.google.com/">Google</button>
    <button data-url="https://www.cnbc.com/pre-markets/">Check Pre-Market Stocks</button>
</div>
<!-- End topbar -->

<!-- Webview -->
<webview
    id="webview"
    autosize="on"
    src="https://media.istockphoto.com/photos/analyzing-samples-in-test-tube-backgrounds-picture-id1290116527?s=612x612"
></webview>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    calculateLayoutSize();
    
    document.getElementById("controls").addEventListener("click", e => {
        const button = e.target;
        const url = button.dataset.url;
        if (!url) { return; }
        
        console.debug("Navigate to", url);
        document.getElementById("webview").src = url;
    });
});