JSを使用してiOSのWeChatブラウザのタイトルを設定する方法

Web フロントエンドと言えば、ブラウザの違いは避けられない問題です。今回、プロジェクトで次の問題が発生しました:

WeChat ナビゲーション バーのコンテンツは、プロジェクトからタイトルを直接取得して設定されます。しかし、私が現在取り組んでいるプロジェクトは単一ページのアプリケーションであり、最初にページ全体が完全に更新されるだけで、後で部分的にのみ更新されるため、ページの更新時にタイトルを js 経由でのみ動的に変更できます。リフレッシュされました。最初に使用した方法は次のとおりです。

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

残念ながら、上記の方法は Android では問題なく設定できますが、iOS の WeChat ブラウザでは無効です。

解決策:

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);

以前は、WeChat ブラウザが初めてページをロードしてタイトルを初期化した後、ドキュメントの変更イベントをリッスンしなくなったためです。タイトル。ここでタイトルを変更した後、空のコンテンツを含む iframe をページに追加し、すぐに iframe を削除します。このとき、タイトルは更新されます。ただし、iframe がロードされて削除されると、iOS ページは数ミリ秒間点滅します (灰色のフレームが表示されます)。一方、Android ページでは灰色のフレームがページ上に直接表示され、消えません。最初にロードされると、ページは次のように設定されます。display: none; これにより、この問題は同時に解決されます。これは、display: none の設定により、iframe がテキスト フローから分離されるためです。 iframe をロードして削除しても、テキスト フローは変更されず、ページもトリガーされません。