JS를 사용하여 iOS에서 WeChat 브라우저 제목을 설정하는 방법

웹 프런트엔드의 경우 브라우저 차이는 피할 수 없는 문제입니다. 이번에는 프로젝트에서 다음과 같은 문제에 직면했습니다.

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

더 이상 document.title의 변경 이벤트를 수신하지 않습니다. 여기서 제목을 수정한 후 페이지에 빈 내용이 포함된 iframe을 추가한 후 즉시 iframe을 삭제하면 제목이 새로 고쳐집니다. 그러나 iframe이 로드되고 삭제되면 iOS 페이지는 몇 밀리초 동안 깜박이는 반면(회색 프레임 포함) Android 페이지에는 회색 프레임이 페이지에 직접 나타나고 iframe이 사라지지 않습니다. 처음 로드되면 페이지가 깜박입니다. iframe의 스타일은 다음과 같이 설정됩니다. display: none; 이렇게 하면 동시에 display: none 설정으로 인해 iframe이 텍스트 흐름에서 분리됩니다. iframe을 로드하고 삭제해도 텍스트 흐름이 변경되지 않으며 페이지 렌더링이 실행되지 않습니다.