How to set the title of WeChat browser in iOS with JS

Speaking of web front-end, browser differences are an unavoidable problem. This time we encountered the following problems in the project:

The content of the WeChat navigation bar is set directly by taking the title from the project. But the project I am working on now is a single-page application. The entire page will only be completely refreshed for the first time, and will only be partially refreshed later, so the title can only be dynamically modified through js when the page is refreshed. The method we used at first is as follows:

document.title = "微信导航栏想要显示的内容";
$("title").text("微信导航栏想要显示的内容");
document.getElementsByTagName("title")[0].innerText = "微信导航栏想要显示的内容"

The above method is simple and convenient. Unfortunately, the above method has no problem in setting up on Android, but it is invalid on iOS WeChat browser.

Solution:

var $body = $('body');
document.title = 'the title you want to set';
var $iframe = $("<iframe style=&#39;display:none;&#39; src=&#39;/favicon.ico&#39;></iframe>");
$iframe.on(&#39;load&#39;,function() {
setTimeout(function() {
$iframe.off(&#39;load&#39;).remove();
}, 0);
}).appendTo($body);

The principle is relatively simple. Previously, it was because after the WeChat browser loaded the page for the first time and initialized the title, it no longer listened to the change event of document.title. After modifying the title here, add an iframe with empty content to the page, and then delete the iframe immediately. At this time, the title will be refreshed. However, when the iframe is loaded and deleted, the iOS page will flash for a few milliseconds (with a gray frame), while the Android page will have a gray frame directly appear on the page and not disappear. Therefore, when the iframe is initially loaded, the page will flash. The style of the iframe is set to: display: none; This solves this problem. At the same time, because of the setting of display: none, the iframe is separated from the text flow, so loading and deleting the iframe will not change the text flow, nor will the page be triggered. render.