Multiple webviews in one window

[probablykasper]

Is your feature request related to a problem? Please describe.
It seems like a fair amount of people want to be able to create browser-like apps in tauri, with multiple webviews.

Describe the solution you'd like
An API for managing multiple webviews in a window, letting you specify position and size, and a way to show/hide different webviews.

Describe alternatives you've considered
In #2709, people wanted something equivalent to Electron's <webview>. As @wusyong said, native webviews just don't have that element, so a <webview> element doesn't seem possible. There are alternatives like <iframe> and apparently shadow DOM, but they supposedly don't support most sites and/or are not isolated.

[xuchaoqian]

�Maybe we can get this by a tauri plugin now. But need an additional window to put tabs?

[imWildCat]

Yeah, out team also need this feature.

[feibi]

How to achieve multi-tab effect？

[nothingismagick]

Tauri was never designed with this purpose in mind. To be honest, it sounds a lot like feature creep right now, and any way something that should be investigated in the tao/wry layer. But if and when this becomes feasible, I promise you that a whole host of feature requests will arise with people basically asking us to create an entire web engine with isolates, scoping, sandboxing, etc. This will require thousands of hours ot engineering effort.

[xuchaoqian]

Tauri was never designed with this purpose in mind. To be honest, it sounds a lot like feature creep right now, and any way something that should be investigated in the tao/wry layer. But if and when this becomes feasible, I promise you that a whole host of feature requests will arise with people basically asking us to create an entire web engine with isolates, scoping, sandboxing, etc. This will require thousands of hours ot engineering effort.

So if we use <iframe> to get the multi-tab feature, how to inject scripts to <iframe>? Is it related to the following task?

[nothingismagick]

Like written above, this is not something we are actively investigating.

[Xheldon]

I have an workaround, just use api/event/ and api/window，and the main window named A is yours, the other window named B is load the remote url or something else.

Then, use the event api, to real-time modify the A window position when the B window position changed.

You may need set borderless to the window to make those two window look like one.

[probablykasper]

Using .parent_window() is also an option for aligning the window positions (Only tested on macOS)

#[cfg(target_os = "macos")]
let child = child.parent_window(main.ns_window().unwrap());
#[cfg(windows)]
let child = child.parent_window(main.hwnd().unwrap());

Screen.Recording.2023-03-24.at.07.29.08.mp4

[Xheldon]

Using .parent_window() is also an option for aligning the window positions (Only tested on macOS)

#[cfg(target_os = "macos")]
let child = child.parent_window(main.ns_window().unwrap());
#[cfg(windows)]
let child = child.parent_window(main.hwnd().unwrap());

Looks good, Could you post the whole code plz? I'm not good at rust code🤣 @probablykasper

[probablykasper]

Sure, here:

create_child_window

pub fn create_child_window(app: AppHandle) {
  if app.get_window("child").is_some() {
    return ();
  }

  let main = app.get_window("main").unwrap();
  let scale_factor = main.scale_factor().unwrap();

  let main_phyiscal_pos = main.outer_position().unwrap();
  let main_pos = main_phyiscal_pos.to_logical::<i32>(scale_factor);

  let main_phyiscal_size = main.outer_size().unwrap();
  let main_size = main_phyiscal_size.to_logical::<i32>(scale_factor);

  let bar_width = 70.0;
  let margin_top = 24.0;
  let margin_bottom = 24.0;
  let margin_right = 5.0;

  let child = window::WindowBuilder::new(&app, "child", WindowUrl::default())
    .title("Child")
    .decorations(false)
    .resizable(false)
    .position(
      main_pos.x as f64 - bar_width - margin_right,
      main_pos.y as f64 + margin_top,
    )
    .inner_size(
      bar_width,
      main_size.height as f64 - margin_top - margin_bottom,
    );

  #[cfg(target_os = "macos")]
  let child = child.parent_window(main.ns_window().unwrap());
  #[cfg(windows)]
  let child = child.parent_window(main.hwnd().unwrap());

  child.build().unwrap();
}

[moom-en]

使用也是对齐窗口位置的选项（仅在 macOS 上测试）.parent_window()

#[cfg(target_os = "macos")]
let child = child.parent_window(main.ns_window().unwrap());
#[cfg(windows)]
let child = child.parent_window(main.hwnd().unwrap());

屏幕录制.2023-03-24.at.07.29.08.mp4

Unfortunately, it is not valid under Windows, this feature is urgently needed, but i'm not good at rust code

[seabye]

If there is no webview label, there is a idea:

-- control window 0
　-- control window 1
　　-- web 1
　-- control window 2
　　-- web 2

They are both windows, but with different roles, with 0 as the Master Controller, then the Web Tag Controller, and finally the web view.

If you don't, you can't solve the need to customize the title bar style when you don't have a webview tag. Because dragging cannot be triggered from the online site.(?)

However, doing so is verbose, and there may be some unsolvable problems.

(This may bring extra consumption.)

--

Tauri should consider webview embedding, especially now that the web has service workers, and the site itself can actually run as a PWA, including offline functionality. For a PWA site, all you need is a custom form with trays and other menus, and some permission interfaces.

This becomes much more difficult without the webview tag.

No need to go further, just to avoid some iframe problems, such as ads ads do not allow iframe, and there are various other cases.

In addition. Allowing an online site to trigger a drag can also alleviate some of the problems. My current situation is to use iframe to customize the title bar by dragging the window in such a way as to separate the local code from the online one. However, iframe has its problems.

[niutech]

This has been solved in #8280, see https://github.com/tauri-apps/tauri/tree/dev/examples/multiwebview