iOS App内嵌H5页面标题乱码问题及解决方法

在移动应用开发中，动态设置H5页面标题十分常见，通常通过URL参数传递。然而，某些开发者在iOS App中遇到标题显示乱码（例如“%25E7%25BA”）的问题。本文将分析原因并提供解决方案。

问题：

H5页面通过URL参数（例如：http:xxx.xxx.xxx.xxx?title=测试title）接收标题，并使用decodeURIComponent()解码及$('title').text(title);设置<title></title>标签。在浏览器中显示正常，但在iOS App内嵌后，标题却显示为URL编码格式。

原因分析：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

问题根源在于URL参数拼接时未进行正确的URL编码。直接将中文标题添加到URL中，iOS系统可能对其进行二次编码，导致最终显示错误。

解决方案：

在将标题添加到URL之前，使用encodeURIComponent()进行编码，再传递给H5页面。H5页面仍使用decodeURIComponent()解码。

正确的URL参数拼接方式：http:xxx.xxx.xxx.xxx?title=${encodeURIComponent("测试title")}

通过encodeURIComponent()预先编码，避免iOS系统二次编码，从而确保标题正确显示。