QWebEngine应用---执行javascript

我们都知道现代前端技术是基于html、css和javascript进行显示交互的，其中html和css属于静态界面显示，辅以javascript使页面交互更丰富。浏览器作为前端页面显示的基石，提供一套显示、交互、调试的东西。QWebEngine同样也提供了这些功能，比如调起开发者页面，QWebEngine还提供接口执行javascript，这方便我们修改页面的显示和交互。

 

在介绍QWebEngine注入javascript之前，我们先来了解一个前端知识，即jquery和JavaScript。

jquery和JavaScript之间的联系和区别：

• JavaScript是用于Web客户端开发的脚本语言
• jQuery是js的框架,基于js语言。功能：集合Ajax技术开发出来的js库，封装js和Ajax的功能，提供函数接口，简化js的操作

为什么要了解这个呢？

是因为Qt提供的demo使用的是jquery，jquery使用起来比原生的javascript更简单，当然使用原生的javascript也是没问题的。

我们以Qt提供的例子进行讲解。

1、加载jquery库

在前端页面开发中，jquery一般是在head标签引入名为jquery.min.js的jquery库。所以如果页面没有引入jquery的库，我们需要先引入。demo中把jquery.min.js加载出来并用一个qt变量进行封装，jquery.min.js的文件在demo的资源里面，在页面加载完成后调用runJavaScript注入到页面中。

 2、执行jquery语句

使用qt.jquery执行jquery语句

void MainWindow::highlightAllLinks()
{
    QString code = QStringLiteral("qt.jQuery('a').each( function () { qt.jQuery(this).css('background-color', 'yellow') } )");
    view->page()->runJavaScript(code);
}

这个是遍历所有a标签的背景色改为黄色

用法是很简单的，需要主意的是，因为每个页面用自己的jquery库，所以如果页面重新加载了是需要重新引入jquery的库。

3、javascript写法

针对上面的修改背景的效果，也可以使用原生javascript，效果是一样的

QString code = "var _lis=document.getElementsByTagName(\"a\");for (var i=0;i<_lis.length;i++){_lis[i].style.background='yellow'}";
view->page()->runJavaScript(code);

4、调试javascript

正常来看，写Qt的一般不熟悉web前端技术，对js写前端的交互不会特别熟练，所以通过启动程序来调js代码效率会很低。我们可以使用浏览器的开发者模式进行js的调试。在浏览器中打开对应的页面，按快捷键F12，进入开发者模式，进入控制台，可以在控制台执行js代码。

输入js代码后回车运行代码，这样就方便我们调试出能用的代码了。

最后，用法及基本原理就这些，剩下的就是发挥你们的聪明才智写出想要的javascript代码了。