So legen Sie den Titel des WeChat-Browsers in iOS mit JS fest

Wenn es um Web-Frontends geht, sind Browserunterschiede ein unvermeidbares Problem. Dieses Mal sind wir im Projekt auf folgende Probleme gestoßen:

Der Inhalt der WeChat-Navigationsleiste wird direkt übernommen der Titel des Projektsets. Bei dem Projekt, an dem ich gerade arbeite, handelt es sich jedoch um eine einseitige Anwendung. Die gesamte Seite wird zum ersten Mal nur vollständig und später nur teilweise aktualisiert, sodass der Titel nur dann dynamisch über js geändert werden kann, wenn die Seite geöffnet ist erfrischt. Die Methode, die wir zunächst verwendet haben, ist wie folgt:

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

Die obige Methode ist einfach und bequem. Leider bereitet die Einrichtung keine Probleme auf Android, aber iOS WeChat-Browsing Das Gerät ist ungültig.

Lösung:

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

Das Änderungsereignis von document.title wird nicht mehr überwacht. Nachdem Sie den Titel hier geändert haben, fügen Sie der Seite einen Iframe mit leerem Inhalt hinzu und löschen Sie den Iframe dann sofort. Zu diesem Zeitpunkt wird der Titel aktualisiert. Wenn der Iframe jedoch geladen und gelöscht wird, blinkt die iOS-Seite einige Millisekunden lang (mit einem grauen Rahmen), während auf der Android-Seite direkt ein grauer Rahmen angezeigt wird und daher nicht verschwindet, wenn der Iframe geladen wird Beim ersten Laden ist der Iframe-Stil auf „display: none“ eingestellt. Gleichzeitig ist der Iframe aufgrund der Einstellung „display: none“ vom Textfluss getrennt Das Laden und Löschen des Iframes ändert weder den Textfluss noch wird das Rendern der Seite ausgelöst.