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代码了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/9077.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring如何使用junit进行测试

第一步maven的pom.xml引入坐标&#xff1a; <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version></dependency> 第二步编写测试方法&#xff1a; 第三步 定义scope类型

ARM实验-ARM主程序调用ARM/C语言子程序

一、实验名称&#xff1a;ARM主程序调用ARM/C语言子程序 二、实验目的&#xff1a; 了解ARM应用程序框架。了解ARM汇编程序函数和C语言程序函数相互调用时&#xff0c;遵循的ATPCS标准&#xff1b;了解和掌握ARM汇编程序调用C语言程序函数的基本方法&#xff1b;了解和掌握AR…

学习Maven Web 应用

Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的项目&#xff0c;如何创建、构建、部署已经运行一个 web 应用。 创建 Web 应用 我们可以使用 maven-archetype-webapp 插件来创建一个简单的 Java web 应用。 打开命令控制台&#xff0c;…

LNMT(linux下nignx+mysql+tomcat(中间件)应用)部署应用、及各服务介绍、部署开源站点jpress

目录 一、环境准备 二、tomcat1和tomcat2服务器&#xff0c;安装配置tomcat 1.tomcat服务器介绍 2.JDK软件介绍 3.查看JDK是否安装 4.tomcat1和tomcat2服务器&#xff0c;安装JDK1.8.0_191&#xff08;JDK必须和nginx版本相适应&#xff0c;不然一直报错&#xff09; 5.安…

软件测试之【单元测试、系统测试、集成测试】

一、单元测试的概念 单元测试&#xff08;Unit Testing&#xff09;是对软件基本组成单元进行的测试&#xff0c;如函数&#xff08;function或procedure&#xff09;或一个类的方法&#xff08;method&#xff09;。当然这里的基本单元不仅仅指的是一个函数或者方法&#xff0…

web爬虫第四弹 - 生产者与消费者模型

聊聊天 做了很长一段时间爬虫工作&#xff0c; 一直没时间记录。 去年好不容易静下心来想写点东西&#xff0c; 也是因为各种琐事断掉了&#xff0c; 看了下之前的爬虫笔记。 web爬虫第三弹&#xff0c; postman的使用&#xff1b; 第四弹&#xff1a;代理ip的充分使用&#x…

手把手用项目实战教你从“一般测试”华丽转身成为“专业测试”

一般测试 vs 专业测试 一般测试&#xff1a;就是很多粉丝自己摸索着学习就容易变成这种&#xff1a; 你说他不会吧&#xff1f;他好像都知道&#xff0c;你说他都会吧&#xff0c;又会工作中各种问题&#xff0c;面试问啥啥说不出来&#xff01; 我们把这种情况的人光荣的就叫…

Windows下通过FastGithub加速国内GitHub访问

有时候在国内访问GitHub会非常慢&#xff0c;有时候直接打不开&#xff0c;无法访问&#xff0c;最近了解到了FastGithub 可以解决以下几个问题: github加速神器&#xff0c;解决github打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等问…

交换排序--冒泡排序和快速排序

交换&#xff0c;是指根据序列中两个元素关键字的比较结果来对换这两个记录在序列中的位置 一&#xff0c;冒泡排序 1.基本思想&#xff1a;从后往前&#xff08;或从前往后&#xff09;两两比较相邻元素的值&#xff0c;若为逆序&#xff08;A[i-1] > A[i]&#xff09;&a…

【MYSQL基础】基础命令介绍

基础命令 MYSQL注释方式 -- 单行注释/* 多行注释 哈哈哈哈哈 哈哈哈哈 */连接数据库 mysql -u root -p12345678退出数据库连接 使用exit;命令可以退出连接 查询MYSQL版本 mysql> select version(); ----------- | version() | ----------- | 8.0.27 | ----------- 1…

ASP.Net Core Web API项目发布到IIS(二)

目录 一.启动并配置IIS环境 1.启用或关闭window功能 2.设置万维网服务 3.点击确定等待配置更改 二.创建新的Web网站并进行设置 1.打开IIS管理 2.配置默认的网站 3.创建新的网站 4.测试 三.可能出现的问题 1.404错误 前一篇已经记录了如何创建项目并发布到文件夹&#x…

【MySQL系列】在Centos7环境安装MySQL

「前言」文章内容大致是在Centos7环境安装MySQL&#xff0c;演示安装的版本为5.7 「归属专栏」MySQL 「笔者」枫叶先生(fy) 「座右铭」前行路上修真我 「枫叶先生有点文青病」「句子分享」 浮生梦&#xff0c;三生渺渺&#xff0c; 因缘无踪&#xff0c;虽堪恋&#xff0c…