Comments (5)
Hello. I have some ideas for the future but nothing implemented with regard to multiple web views/widgets in a single window. Currently there's support for one window and one web view/widget.
from webview.
Although I'm not sure how well this will work, you could try to manage your own window and instantiate two webview instances using a single existing window.
from webview.
I came up with this example for Win32 which places two webview widgets on a single window. Haven't tried with GTK but it might be doable. Not sure about Cocoa because the library sets the contentView
property of the window.
#include "webview.h"
#include <windows.h>
#include <memory>
#include <string>
constexpr const auto html1 =
R"html(<button id="ping">Ping</button>
<p id="received-container" style="display: none">Received pong!</p>
<script type="module">
const elements = {
pingButton: document.getElementById("ping"),
receivedContainer: document.getElementById("received-container")
}
window.pong = () => elements.receivedContainer.style.display = "block";
elements.pingButton.addEventListener("click", () => {
elements.receivedContainer.style.display = "none";
window.ping();
});
</script>)html";
constexpr const auto html2 =
R"html(<p id="received-container" style="display: none">Received ping!
<button id="pong">Pong</button></p>
<script type="module">
const elements = {
pongButton: document.getElementById("pong"),
receivedContainer: document.getElementById("received-container")
}
window.ping = () => elements.receivedContainer.style.display = "block";
elements.pongButton.addEventListener("click", () => {
elements.receivedContainer.style.display = "none";
window.pong();
});
</script>)html";
class MainWindow {
public:
MainWindow(const wchar_t *class_name, const wchar_t *title, int x, int y,
int width, int height)
: m_instance{GetModuleHandle(nullptr)} {
// Create top-level window
WNDCLASSEXW wc{};
wc.cbSize = sizeof(WNDCLASSEX);
wc.lpfnWndProc = wndproc_wrapper;
wc.hInstance = m_instance;
wc.hCursor = LoadCursor(nullptr, IDC_ARROW);
wc.hbrBackground = reinterpret_cast<HBRUSH>(COLOR_WINDOW + 1);
wc.lpszClassName = class_name;
RegisterClassExW(&wc);
CreateWindowExW(0, class_name, title, WS_OVERLAPPEDWINDOW, x, y, width,
height, nullptr, nullptr, m_instance, this);
}
void show() {
ShowWindow(m_hwnd, SW_SHOW);
UpdateWindow(m_hwnd);
}
private:
static LRESULT wndproc_wrapper(HWND hwnd, UINT msg, WPARAM wp, LPARAM lp) {
MainWindow *self{};
if (msg == WM_NCCREATE) {
auto *lpcs{reinterpret_cast<LPCREATESTRUCT>(lp)};
self = static_cast<MainWindow *>(lpcs->lpCreateParams);
self->m_hwnd = hwnd;
SetWindowLongPtrW(hwnd, GWLP_USERDATA, reinterpret_cast<LONG_PTR>(self));
} else {
self = reinterpret_cast<MainWindow *>(
GetWindowLongPtrW(hwnd, GWLP_USERDATA));
}
if (!self) {
return DefWindowProcW(hwnd, msg, wp, lp);
}
return self->wndproc(msg, wp, lp);
}
LRESULT wndproc(UINT msg, WPARAM wp, LPARAM lp) {
switch (msg) {
case WM_CREATE: {
// Create webview instances
m_webview1 = std::make_unique<webview::webview>(false, m_hwnd);
m_webview2 = std::make_unique<webview::webview>(false, m_hwnd);
m_webview1->bind("ping",
[this](const std::string &req) -> std::string {
// Forward to another webview instance.
m_webview2->eval("window.ping(" + req + ")");
return "";
});
m_webview2->bind("pong",
[this](const std::string &req) -> std::string {
// Respond to another webview instance.
m_webview1->eval("window.pong(" + req + ")");
return "";
});
m_webview1->set_html(html1);
m_webview2->set_html(html2);
break;
}
case WM_SIZE: {
// Update the UI layout
RECT main_rect{};
GetClientRect(m_hwnd, &main_rect);
auto main_width{main_rect.right - main_rect.left};
auto main_half_width{main_width / 2};
auto main_height{main_rect.bottom - main_rect.top};
MoveWindow(static_cast<HWND>(m_webview1->widget()), main_rect.left,
main_rect.top, main_width / 2, main_height, TRUE);
MoveWindow(static_cast<HWND>(m_webview2->widget()),
main_rect.left + main_half_width, main_rect.top,
main_width / 2, main_height, TRUE);
break;
}
case WM_CLOSE:
DestroyWindow(m_hwnd);
break;
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProcW(m_hwnd, msg, wp, lp);
}
return 0;
}
HINSTANCE m_instance{};
std::unique_ptr<webview::webview> m_webview1;
std::unique_ptr<webview::webview> m_webview2;
HWND m_hwnd{};
};
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
LPSTR lpCmdLine, int nShowCmd) {
CoInitializeEx(nullptr, COINIT_APARTMENTTHREADED);
// Create the main window
MainWindow window{
L"app_window", L"Win32 Example", CW_USEDEFAULT, CW_USEDEFAULT, 480, 320};
window.show();
// The message loop
MSG msg;
while (GetMessageW(&msg, nullptr, 0, 0) > 0) {
TranslateMessage(&msg);
DispatchMessageW(&msg);
}
return 0;
}
from webview.
Thank!. Now....How could I get the w->widget from WEBVIEW_API C?
Something like this....
WEBVIEW_API void *webview_get_widget(webview_t w)
from webview.
webview_get_native_handle(w, WEBVIEW_NATIVE_HANDLE_KIND_UI_WIDGET);
from webview.
Related Issues (20)
- How to correctly render the web page? HOT 3
- Q: HTTP communication over unix domain sockets HOT 1
- Add troubleshooting hint to readme about where to get CMake on windows machines.
- Calling Webview::eval on some JS code does not work. HOT 7
- How to pass a javascript function as an arg to C/C++? HOT 1
- [bug] utf8 support for webbind HOT 17
- How to stream bytes to webview?
- Handling webview as part of a library causes segfault when setting variables (Linux/C++) HOT 1
- Looking for Qt binding project
- Update to webkitgtk-6.0 (GTK4, libsoup 3) HOT 1
- How to run javascript code passed as an html string to the webview in secure context? HOT 1
- Call webview_eval from thread HOT 1
- enable microphone in MacOs Sonoma ?
- Mac OS - JS mousedown is not working properly HOT 2
- Cannot use set_html with string longer than 1572834 characters on Windows HOT 4
- Font not property rendered in macos using webgl HOT 1
- how Inject JavaScript code?
- Not work when embed into a win32 window HOT 2
- error: undefined symbol: gtk_init_check
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webview.