How to set the title_javascript technique of micro-browser in iOS

When it comes to Web front-end, browser differences are an unavoidable problem, and this time the project encounters the following problems:

The contents of the micro-beacon navigation bar are set by the title of the item directly taken. But now do the project is a single page application, the entire page will only be completely refreshed for the first time, only local refresh, so only in the page refresh through JS dynamic change title. We started using the following procedure:

Document.title = "What the micro-beacon navigation bar wants to display";
$ ("title"). Text ("What the micro-beacon navigation bar wants to display");
document.getElementsByTagName ("title") [0].innertext = "What the micro-navigation bar wants to display"

The above method is simple and convenient, but the above method has no problem with Android, but iOS micro-browser is invalid.

Workaround:

var $body = $ (' body ');
Document.title = ' The title you want to set ';
var $iframe = $ ("<iframe style= ' display:none; ' src= '/favicon.ico ' ></iframe>");
$iframe. On (' Load ', function () {
settimeout (function () {
$iframe. Off (' Load '). Remove ();
}, 0);
}). Appendto ($body);

The principle is relatively simple, before the micro-trust browser first loaded page initialization title, it will no longer listen to the document.title change events. After modifying title here, add an iframe with an empty content to the page, then delete the iframe immediately, and then refresh the title. However, when the IFRAME is loaded and deleted, the iOS page will have a few milliseconds of flashing (there is a gray box), Android directly has a gray box appears in the page does not disappear, so, the first load of the IFRAME, the style of the IFRAME is set to: Display:none; This solves the problem, and because display:none this setting, the IFRAME is detached from the text stream, loading and deleting this iframe will not change the text stream, nor will it trigger the page rendering.

The above is a small set of JS to introduce how to configure the iOS in the micro-letter browser title, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!