Shulou(Shulou.com)06/03 Report--

Gtk application embedded web pages and native code interaction method example analysis, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

The method of interacting with native code and embedded web pages in Gtk application

Keywords: gtk webikit webview javascript embedded web page js object WebKitWebExtension

In the process of developing applications using Gtk, if you need to embed web pages, then using libwebkit2gtk is a very natural and correct choice. Then it is possible that the native program code may need to interact with the web page.

The interaction between the Gtk program and the web page mainly has two aspects: 1 the Gtk program needs to call the web page js code 2 the web page needs to call the function code of the Gtk program

Requirement 1 can be solved by using webkit2gtk's built-in webkit_web_view_run_javascript function and webkit2gtk's built-in web extendsion extension support function.

Don't say much. Look at the code!

Gtk embedded web program example, webviewgtk.c

/ * Copyright (C) 2020 Wei Keting. All rights reserved.* @ Time: 2021-04-04 12 File 18 * @ File: webviewgtk.c* @ Description: * * dependent download: * sudo apt install libwebkit2gtk-4.0-doc libwebkit2gtk-4.0-dev libgtk-3-dev* gcc webviewgtk.c-o webviewgtk-D_GNU_SOURCE-G3-Wall `pkg-config-cflags-- libs webkit2gtk- 4.0` * * / # include # include static voidweb_view_javascript_finished (GObject * object GAsyncResult * result, gpointer user_data) {WebKitJavascriptResult * js_result JSCValue * value; GError * error = NULL; js_result = webkit_web_view_run_javascript_finish (WEBKIT_WEB_VIEW (object), result, & error); if (! js_result) {g_warning ("Error running _ javascript:% s", error- > message); g_error_free (error); return } value = webkit_javascript_result_get_js_value (js_result); if (jsc_value_is_string (value)) {JSCException * exception; gchar * str_value; str_value = jsc_value_to_string (value); exception = jsc_context_get_exception (jsc_value_get_context (value)) If (exception) g_warning ("Error running _ javascript:% s", jsc_exception_get_message (exception)); else g_print ("Script result:% s\ n", str_value); g_free (str_value);} else {g_warning ("Error running _ javascript: unexpected return value");} webkit_javascript_result_unref (js_result) } static gbooleanon_webview_load_failed (WebKitWebView * webview, WebKitLoadEvent load_event, gchar * failing_uri, GError * error, gpointer user_data) {g_printerr ("% s:% s\ n", failing_uri,error- > message); return FALSE } static voidon_button_clicked (GtkButton * button, WebKitWebView * webview) {static gint t = 0; gchar buf [128C] = {0}; g_snprintf (buf,sizeof (buf)-1, "change_span_id ('_ n% d')", t); tweak code 1; / / run the js code webkit_web_view_run_javascript (webview,buf,NULL,web_view_javascript_finished,NULL) directly in webview's current html page } static voidwebkit_web_extension_initialize (WebKitWebContext * context, gpointer user_data) {g_printerr ("% s:% d\ n", _ _ FUNCTION__,getpid ()); / / set the search directory of the web extendsion extension .so file webkit_web_context_set_web_extensions_directory (context, ".") Create window and add webkit controls * / static voidon_activate (GtkApplication * app) {GtkWindow * window; g_assert (GTK_IS_APPLICATION (app)); window = gtk_application_get_active_window (app) If (window = = NULL) window = g_object_new (GTK_TYPE_WINDOW, "application", app, "default-width", 600, "default-height", 300 NULL) / register the initialization functions g_signal_connect (webkit_web_context_get_default (), "initialize-web-extensions", G_CALLBACK (webkit_web_extension_initialize), NULL) of web extensions; GtkWidget* webview = webkit_web_view_new (); g_signal_connect (webview, "load-failed", G_CALLBACK (on_webview_load_failed), NULL) / / load the web page GFile * file = g_file_new_for_path ("webview.html"); gchar * uri = g_file_get_uri (file); webkit_web_view_load_uri (WEBKIT_WEB_VIEW (webview), uri); g_free (uri); g_object_unref (file); GtkWidget * vbox = gtk_box_new (GTK_ORIENTATION_VERTICAL,0) GtkWidget * button = gtk_button_new_with_label ("change span"); gtk_box_pack_start (GTK_BOX (vbox), GTK_WIDGET (webview), TRUE,TRUE,0); gtk_box_pack_start (GTK_BOX (vbox), GTK_WIDGET (button), FALSE,TRUE,0); gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (vbox)); gtk_widget_show_all (GTK_WIDGET (vbox)) Gtk_window_present (window); g_signal_connect (button, "clicked", G_CALLBACK (on_button_clicked), webview);} intmain (int argc, char * argv []) {g_autoptr (GtkApplication) app = NULL; int ret; app = gtk_application_new ("com.weiketing.webkit_webview", G_APPLICATION_FLAGS_NONE) G_signal_connect (app, "activate", G_CALLBACK (on_activate), NULL); ret = g_application_run (G_APPLICATION (app), argc, argv); return ret;}

Web extension implementation code example, web_exten.c

/ * Copyright (C) 2020 Wei Keting. All rights reserved.* @ Time: 2021-04-04 12 File 18 * @ File: web_exten.c* @ Description: * * dependent download: * sudo apt install libwebkit2gtk-4.0-doc libwebkit2gtk-4.0-dev libgtk-3-dev* gcc web_exten.c-o libweb_exten.so-shared-Wl,-soname Libweb_exten.so-D_GNU_SOURCE-G3-Wall `pkg-config-- cflags-- libs webkit2gtk- 4.0` * * / # include # include static gintjs_app_add (gpointer * first,gint num) {static gint N = 0 G_printerr ("% s:% p\ n", _ _ FUNCTION__,first); N + = num; return N;} static void window_object_cleared_callback (WebKitScriptWorld * world, WebKitWebPage * web_page, WebKitFrame * frame, gpointer user_data) {JSCContext* jsContext JsContext = webkit_frame_get_js_context_for_script_world (frame, world); / / add a js global variable gtkValue jsc_context_set_value (jsContext, "gtkValue", jsc_value_new_string (jsContext, "_ _ test_js_exten")) / * Use JSC API to add the JavaScript code you want * / / register a js class named NativeTest JSCClass* app = jsc_context_register_class (jsContext, "NativeTest", NULL,NULL,NULL); / / g_object_new (JSC_TYPE_CLASS, "name", "JSApp", "context", jsContext,NULL) / / add the add method jsc_class_add_method (app, "add", G_CALLBACK (js_app_add), NULL,NULL,G_TYPE_INT,1,G_TYPE_INT,NULL) to the JSCClass class; / / create an obj. As a binding instance of the JSCClass class, the first parameter of the JSCClass method callback is obj GObject * obj = g_object_new. Jsc_context_set_value (jsContext, "GtkNative", jsc_value_new_object (jsContext,obj,app)); g_printerr ("% s:% d% p\ n", _ _ FUNCTION__,getpid (), obj); g_object_unref (obj) } initialization function g_signal_connect of G_MODULE_EXPORT voidwebkit_web_extension_initialize (WebKitWebExtension * extension) {/ / web extension (webkit_script_world_get_default (), "window-object-cleared", G_CALLBACK (window_object_cleared_callback), NULL);}

Embedded web page example, webview.html

Webkit Webview test function change_span_id (vastly added) {/ / alert ("test") document.getElementById ('span_id') [xss_clean] =' test'+v+gtkValue return v} function native_add (num) {/ / call the custom added js interface I = GtkNative.add (num) document.getElementById ('add') [xss_clean ] = I} words for test: Native Add

Sample run: installation dependency: sudo apt install libwebkit2gtk-4.0-doc libwebkit2gtk-4.0-dev libgtk-3-dev

Put webviewgtk.c,web_exten.c and webview.html in the same directory. Compiler:

Gcc web_exten.c-o libweb_exten.so-shared-Wl,-soname,libweb_exten.so-D_GNU_SOURCE-G3-Wall `pkg-config-- cflags-- libs webkit2gtk- 4.0`gcc webviewgtk.c-o webviewgtk-D_GNU_SOURCE-G3-Wall `pkg-config-- cflags-- libs webkit2gtk- 4.0`

Run the program:

. / webviewgtk after reading the above, have you mastered the method of example analysis of the method of interacting with native code and embedded web pages in Gtk application? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.