如何在Vala中借助webkit2gtk-4.0获取渲染后网页的源代码

要获取网页渲染后的完整HTML（而非仅URI），webkit2gtk-4.0提供了两种可靠方案，核心是利用WebKit.WebView的DOM接口或JavaScript注入能力，以下是具体实现：

方案1：通过DOM Document获取完整HTML #

监听页面加载完成信号后，直接获取DOM文档的outerHTML属性，这是最直接的原生API方式：

using WebKit;
using Gtk;

int main(string[] args) {
    Gtk.init(ref args);

    var window = new Window();
    window.title = "WebKit HTML Grabber";
    window.default_width = 800;
    window.default_height = 600;
    window.destroy.connect(Gtk.main_quit);

    var web_view = new WebView();
    window.add(web_view);

    // 页面加载完成后执行HTML获取逻辑
    web_view.load_finished.connect((load_event) => {
        var dom_doc = web_view.get_dom_document();
        if (dom_doc == null) return;

        // 获取渲染后的完整HTML内容
        string rendered_html = dom_doc.document_element.outer_html;
        
        // 保存到本地文件
        if (FileUtils.write_string("rendered_page.html", rendered_html)) {
            print("渲染后的HTML已保存至 rendered_page.html\n");
        } else {
            print("保存文件失败\n");
        }
    });

    // 加载目标网页
    web_view.load_uri("https://example.com");

    window.show_all();
    Gtk.main();
    return 0;
}

方案2：通过JavaScript注入获取HTML #

如果DOM接口存在跨域或权限限制，可通过执行JavaScript来获取页面内容，灵活性更高：

using WebKit;
using Gtk;

int main(string[] args) {
    Gtk.init(ref args);

    var window = new Window();
    window.title = "WebKit JS HTML Grabber";
    window.default_width = 800;
    window.default_height = 600;
    window.destroy.connect(Gtk.main_quit);

    var web_view = new WebView();
    window.add(web_view);

    web_view.load_finished.connect((load_event) => {
        // 执行JS获取页面完整HTML
        web_view.run_javascript("document.documentElement.outerHTML", null, (obj, res) => {
            try {
                var result = web_view.run_javascript_finish(res);
                if (result == null) return;

                var js_value = result.get_js_value();
                if (!js_value.is_string()) return;

                string rendered_html = js_value.to_string();
                if (FileUtils.write_string("rendered_page_js.html", rendered_html)) {
                    print("通过JS获取的HTML已保存至 rendered_page_js.html\n");
                }
            } catch (Error e) {
                print("JS执行失败: %s\n", e.message);
            }
        });
    });

    web_view.load_uri("https://example.com");

    window.show_all();
    Gtk.main();
    return 0;
}

编译与依赖说明 #

• 确保系统安装webkit2gtk-4.0开发包：Debian/Ubuntu系执行sudo apt install libwebkit2gtk-4.0-dev
• 编译命令（以方案1代码为例）：

  valac html_grabber.vala --pkg webkit2gtk-4.0 --pkg gtk+-3.0
  

内容的提问来源于stack exchange，提问作者PhRef