使用QWebView显示弹窗的效果优化

博客介绍了webview的具体优化思路。在HTML解析方面,引入htmlcxx库解析标签,对img标签src属性特殊处理后传递给webview。在尺寸方面,限制webview最大最小尺寸,加载完成后根据mainframe返回的content尺寸重新设置对话框尺寸,并对不同显示状态下的弹窗位置进行自适应调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

具体优化思路

  • 对于html字符串的解析,不再按照xml格式进行解析。因为xml格式要比html格式严格,如果按照xml格式解析,容易丢失数据
    • 引入一个第三方库htmlcxx,专门用于解析html标签
    • 对于img标签中的src属性,进行特殊处理
      • 如果是在线网址和带file:///前缀,直接跳过
      • 如果是相对路径或者绝对路径,增加file:///前缀以及拼接绝对路径
    • 将处理后的html标签作为一个整体直接传递给webview,这样就不会显示不全数据
  • 限制webview的最大和最小尺寸,且不允许改变webview尺寸大小
  • 首先给webview设置一个默认大小,等待加载完成后根据mainframe返回的content尺寸重新设置webview对话框尺寸
  • 默认显示在鼠标点击位置的X坐标,y坐标上移半个webview对话框高度
    • 数据点击返回坐标是以渲染区左上角为原点,这里webview的坐标原点是mainwindow的左上角,所以需要加上左侧栏宽度和顶部工具栏高度
  • 最大化显示状态下的弹窗位置自适应
    • 如果鼠标点击位置距离主界面的右边距小于webview对话框的宽度时,将对话框的位置左移对话框本身的宽度
    • 如果鼠标点击位置距离主界面的上边距小于半个webview对话框的高度时,将对话框的位置下移半个webview对话框的高度
    • 如果鼠标点击位置距离主界面的下边距小于半个webview对话框的高度时,将对话框的位置上移半个webview对话框的高度
  • 非最大化显示状态下的弹窗位置自适应
    • 默认显示在渲染区中心
      • 渲染区宽度减去webview对话框宽度除以2再加上左侧栏宽度和mainwindow的x坐标值
      • 渲染区高度减去webview对话框高度除以2再加上顶部工具栏高度和mainwindow的有坐标值
    • 大小控制在渲染区尺寸减去上下左右边距
    • 这里稍微做了一下细节调整:对部分参数进行了补充

HTML解析

	ParserDom parser;
	tree<Node> dom;

	try
	{
		dom = parser.parseTree(strDescription.toStdString());

		tree<Node>::iterator it = dom.begin();
		for (; it!=dom.end(); it++)
		{
			if (it->isTag())
			{
				if (it->tagName().compare("img") == 0)
				{
					it->parseAttributes();

					QString strSrcAttribute = QString::fromStdString(it->attribute("src").second);
					
					//具体处理
				}
			}
		}
	}
	catch (...)
	{
		
	}

加载完成后重新定义webview尺寸

	QSize contentsSize = this->page()->mainFrame()->contentsSize();

	int nContentsWidth = contentsSize.width() > WEBVIEW_MAX_WIDTH ? WEBVIEW_MAX_WIDTH : contentsSize.width();
	int nContentsHeight = contentsSize.height() > WEBVIEW_MAX_HEIGHT ? WEBVIEW_MAX_HEIGHT : contentsSize.height();

	this->setFixedSize(QSize(nContentsWidth+20,nContentsHeight));
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值