Gtk应用内嵌网页与原生代码交互方法
在使用Gtk开发应用程序的过程中，如果需要内嵌网页，那么使用libwebkit2gtk是个非常自然和正确的选择。那么这里就可能原生程序代码可能需要跟网页交互的问题。
Gtk程序跟网页的交互，主要有两个方面：
1 Gtk程序需要调用网页js代码
2 网页需要调用Gtk程序的功能代码
需求1，使用webkit2gtk的内置webkit_web_view_run_javascript函数即可解决
需求2，使用webkit2gtk的内置的web extendsion扩展支持功能解决 或 window.webkit.messageHandlers..postMessage(value)
不多说看代码吧！
Gtk嵌入网页Demo程序
webviewgtk.c
/**
*
* Copyright (C) 2020 Wei Keting<weikting@gmail.com>. All rights reserved.
* @Time : 2021-04-04 12:18
* @Last Modified: 2022-12-10 17:27
* @File : webviewgtk.c
* @Description :
*
* 依赖下载：
* 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 <gtk/gtk.h>
#include <glib.h>
#include <webkit2/webkit2.h>
#include <sys/types.h>
#include <unistd.h>
static void
web_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 gboolean
on_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 void
handle_script_message (
WebKitUserContentManager* self,
WebKitJavascriptResult* js_result,
gpointer user_data)
{
JSCValue *value;
value = webkit_javascript_result_get_js_value (js_result);
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_printerr ("Script result: %s\n", str_value);
g_printerr("%s: %s\n",__func__,str_value);
g_free (str_value);
}
static void
on_button_clicked(GtkButton *button,
WebKitWebView *webview)
{
static gint t = 0;
gchar buf[128]={0};
g_snprintf(buf,sizeof(buf)-1,"change_span_id('_n%d')",t);
t+=1;
//在webview当前的html页面中直接运行js代码
webkit_web_view_run_javascript(webview,buf,NULL,web_view_javascript_finished,NULL);
}
static void
webkit_web_extension_initialize (WebKitWebContext *context,
gpointer user_data)
{
g_printerr("%s: %d\n",__FUNCTION__,getpid());
//设置web extendsion扩张.so文件的搜索目录
webkit_web_context_set_web_extensions_directory(context,".");
}
/**
** 创建window，添加webkit控件
**
**/
static void
on_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);
//注册处理web extensions的初始化函数
g_signal_connect(webkit_web_context_get_default(),"initialize-web-extensions",G_CALLBACK(webkit_web_extension_initialize),NULL);
GtkWidget* webview = webkit_web_view_new();
g_signal_connect (webview, "load-failed", G_CALLBACK (on_webview_load_failed), NULL);
// 加载网页
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);
// 注册 window.webkit.messageHandlers.msgToNative.postMessage(value)
// 的回调函数
WebKitUserContentManager *manager = webkit_web_view_get_user_content_manager (WEBKIT_WEB_VIEW(webview));
g_signal_connect (manager, "script-message-received::msgToNative",
G_CALLBACK (handle_script_message), NULL);
webkit_user_content_manager_register_script_message_handler (manager, "msgToNative");
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);
}
int
main (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 Demo
web_exten.c
/**
*
* Copyright (C) 2020 Wei Keting<weikting@gmail.com>. All rights reserved.
* @Time : 2021-04-04 12:18
* @File : web_exten.c
* @Description :
*
* 依赖下载：
* 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 <glib.h>
#include <webkit2/webkit-web-extension.h>
#include <sys/types.h>
#include <unistd.h>
static gint
js_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);
//添加一个js全局变量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 */
//注册一个名为NativeTest的js类
JSCClass* app = jsc_context_register_class(jsContext,"NativeTest",NULL,NULL,NULL); // g_object_new(JSC_TYPE_CLASS,"name","JSApp","context",jsContext,NULL);
//给JSCClass类添加add方法
jsc_class_add_method(app,"add",G_CALLBACK(js_app_add),NULL,NULL,G_TYPE_INT,1,G_TYPE_INT,NULL);
//创建一个obj，作为JSCClass类绑定实例，JSCClass方法回调的第一个参数就是obj
GObject *obj = g_object_new(G_TYPE_OBJECT,NULL);
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);
}
G_MODULE_EXPORT void
webkit_web_extension_initialize (WebKitWebExtension *extension)
{
//web extension的初始化函数
g_signal_connect (webkit_script_world_get_default (),
"window-object-cleared",
G_CALLBACK (window_object_cleared_callback),
NULL);
}
内嵌的网页示例，webview.html
<!DOCTYPE html>
<html lang="zh">
<!--filename: webview.html -->
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="referrer" content="always"/>
<title>Webkit Webview test</title>
<script type="text/javascript">
function change_span_id(v=''){
//alert("test")
document.getElementById('span_id').innerHTML = 'test'+v+gtkValue
return v
}
function native_add(num){
//调用自定义添加的js接口
i= GtkNative.add(num)
document.getElementById('add').innerHTML = i
}
function send2Gtk(){
e = document.getElementById('msg')
window.webkit.messageHandlers.msgToNative.postMessage(e.value)
}
</script>
</head>
<body>
<span>words for test: </span><span id="span_id"></span>
<br/>
<button onclick="change_span_id()">change span id</button>
<br/>
<span>Native add: </span><span id='add'></span>
<br/>
<button onclick="native_add(2)">Native Add</button>
<br/>
<input type="text" id="msg" />
<br/>
<button onclick="send2Gtk()">Send to Native</button>
</body>
</html>
Web Extension相比于window.webkit.messageHandlers..postMessage(value)
的优点是有返回值。
示例运行
安装依赖：
sudo apt install libwebkit2gtk-4.0-doc libwebkit2gtk-4.0-dev libgtk-3-dev
把webviewgtk.c，web_exten.c, webview.html放在同一目录下。
编译程序：
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`
运行程序：
./webviewgtk