Switching from WebView to another under GtkScrolledWindow

Question

I am trying to create a simple web browser with already-opened multiple tabs using WebKitGtk2 and Python. I want it such that if I click a button, the GtkScrolledWindow will drop its current viewport (Which contains the current WebView), and use the new WebView instead (Simulating switching from one opened Tab to another).

This is my code:

def buttonclicked1(self):
  scrolledwindow.remove(scrolledwindow.get_children()[0])
  scrolledwindow.add(webview1)
  
  
def buttonclicked2(self):
  scrolledwindow.remove(scrolledwindow.get_children()[0])
  scrolledwindow.add(webview2)

scrolledwindow = builder.get_object("scrolledwindow")

webview1 = Webkit.WebView.new()
webview1.load_uri("https://bing.com")

webview2 = Webkit.WebView.new()
webview2.load_uri("https://google.com")

# Use webview1 as default.
scrolledwindow.add(webview1)

button1 = builder.get_object("button1")
button2 = builder.get_object("button2")

button1.connect("clicked", buttonclicked1)
button2.connect("clicked", buttonclicked2)

However, the issue is that when i switch to the other tab, it does not work. The entire scrolledwindow is not displayed (Only the first view, webview1, is displayed and works as expected which is linked to button1, but when i click button2 the view is gone and i have only empty window with nothing).

What could be the reason?

Edit: I am creating multiple webviews and doing it in this apparoach because i don't want to lose the loaded pages. In other words, I don't want to reload them each time the user switches from one tab to another.

Answer 1

I don't know how to fix it as described, but I know how to do it slightly differently.

Use Gtk.Box instead of your scrolled window as main container for the webviews:

gtk_box = builder.get_object("gtk_box")

add all webviews to this

gtk_box.add(webview1)
gtk_box.add(webview2)

and hide all except the one visible

webview2.hide()

Then in the functions buttonclicked, you just hide the currently selected webview and show the new one, for example:

webview1.hide()
webview2.show()

I don't think you need ScrolledWindow as a container because WebKitGtk2 should be already scrollable but if not, you can of course show/hide the container containing the webview instead of the webview itself.

Example code:

switching between buttons with labels "testbtn1" and "testbtn2" instead of WebViews (but should work the same as with webviews).

import gi

gi.require_version("Gtk", "3.0")
from gi.repository import Gtk, Gdk

def buttonclicked1(self):
    testbtn2.hide()
    testbtn1.show()


def buttonclicked2(self):
    testbtn1.hide()
    testbtn2.show()

builder = Gtk.Builder()
builder.add_from_file("gtktest.glade")

gtk_box = builder.get_object("scrolledwindow")
testbtn1 = Gtk.Button(label = "testbtn1")
testbtn2 = Gtk.Button(label = "testbtn2")

gtk_box.add(testbtn1)
gtk_box.add(testbtn2)

testbtn1.hide()

button1 = builder.get_object("button1")
button2 = builder.get_object("button2")

button1.connect("clicked", buttonclicked1)
button2.connect("clicked", buttonclicked2)

window = builder.get_object("window1")
window.show_all()
Gtk.main()

gtktest.glade:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <object class="GtkWindow" id="window1">
    <property name="can-focus">False</property>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can-focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkBox">
            <property name="visible">True</property>
            <property name="can-focus">False</property>
            <child>
              <object class="GtkButton" id="button1">
                <property name="label" translatable="yes">button</property>
                <property name="visible">True</property>
                <property name="can-focus">True</property>
                <property name="receives-default">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="button2">
                <property name="label" translatable="yes">button</property>
                <property name="visible">True</property>
                <property name="can-focus">True</property>
                <property name="receives-default">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">1</property>
              </packing>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkScrolledWindow" id="scrolledwindowx">
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="shadow-type">in</property>
            <child>
              <object class="GtkViewport">
                <property name="visible">True</property>
                <property name="can-focus">False</property>
                <child>
                  <object class="GtkBox" id="scrolledwindow">
                    <property name="visible">True</property>
                    <property name="can-focus">False</property>
                    <property name="orientation">vertical</property>
                    <child>
                      <placeholder/>
                    </child>
                    <child>
                      <placeholder/>
                    </child>
                    <child>
                      <placeholder/>
                    </child>
                  </object>
                </child>
              </object>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>