개선: js iOS 위 챗 브 라 우 저의 title 수정

문제 소개
전단 입문 한 지 얼마 되 지 않 아 입문 도 아 닌 것 같 습 니 다. 최근 인터넷 에 서 는 각자 의 책 개명 이 유행 하고 있 습 니 다. '전단 개발, 입문 에서 포기 까지', '안 드 로 이 드 개발, 입문 에서 직업 을 바 꾸 기 까지' 같은 것 이 유행 하고 있 습 니 다. 프로그래머 는 정말 자조 적 인 집단 이지 만 우 리 는 반드시 적 극 적 이 고 향상 되 었 을 것 입 니 다.
웹 전단 에 대해 말하자면 브 라 우 저의 차 이 는 피 할 수 없 는 문제 입 니 다. 이번 문 제 는 다음 과 같 습 니 다.
한 페이지 응용 프로그램 에 서 는 전체 페이지 가 첫 번 째 로 완전히 새로 고침 되 고 그 다음 에는 부분 적 으로 만 새로 고침 되 기 때문에 서버 에서 title 을 제어 할 수 없고 페이지 를 새로 고침 할 때 js 를 통 해 title 을 수정 할 수 있 습 니 다.일반적인 방법 은 다음 과 같 습 니 다. 안 타 깝 게 도 iOS 위 챗 브 라 우 저 에 서 는 유효 하지 않 습 니 다.

document.title = "the title you want to set";

해결 방법

  var $body = $('body');
  document.title = 'the title you want to set';
  var $iframe = $(""</span>);
  $iframe.on(<span class="hljs-string">'load'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
    setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
      $iframe.off(<span class="hljs-string">'load'</span>).remove();
    }, <span class="hljs-number">0</span>);
  }).appendTo($body);</code></pre>  <br>원 리 는 간단 하 다. 이전 에는 위 챗 브 라 우 저가 처음으로 페이지 를 불 러 와 title 을 초기 화한 후 document. title 의 change 사건 을 더 이상 감청 하지 않 았 기 때문이다.여기 서 title 을 수정 한 후 페이지 에 빈 iframe 을 추가 한 후 이 iframe 을 즉시 삭제 합 니 다. 이 때 title 을 새로 고 칩 니 다.<br>이 방법 은 오리지널 이 아니 라 출처 가 많 으 니 위 에서 알 고 있 는 링크 를 인용 하면 된다.<br>문제 가 단순 하 다 면 저 는 한밤중 에 이 블 로 그 를 쓰 지 않 았 을 것 입 니 다. 테스트 를 통 해 얻 을 수 있 습 니 다. iframe 을 불 러 오고 삭제 할 때 iOS 페이지 는 몇 밀리초 동안 반 짝 거 립 니 다 (회색 상자 가 있 습 니 다). Android 는 직접 회색 상자 가 페이지 에 나타 나 사라 지지 않 습 니 다.<br>처음에는 문제 가 여기에 있 는 것 을 발견 하지 못 했 으 나 나중에 git 버 전 을 통 해 되 돌려 비교 한 후에 야 문 제 를 찾 았 다.이 iframe 디 스 플레이 와 숨 김 이 페이지 디 스 플레이 에 영향 을 미 쳤 기 때문에 iframe 을 불 러 오기 시 작 했 을 때 이 iframe 스타일 을 다음 과 같이 설정 합 니 다.<pre><code><span class="hljs-tag">display</span>: <span class="hljs-tag">none</span>;</code></pre>  <br>개 선 된 코드 는 다음 과 같 습 니 다.<pre><code>  <span class="hljs-keyword">var</span> $body = $(<span class="hljs-string">'body'</span>);
  document.title = <span class="hljs-string">'the title you want to set'</span>;
  <span class="hljs-keyword">var</span> $iframe = $(<span class="hljs-string">"<iframe style="display:none;" src="/favicon.ico"/>"</span>);
  $iframe.on(<span class="hljs-string">'load'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
    setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
      $iframe.off(<span class="hljs-string">'load'</span>).remove();
    }, <span class="hljs-number">0</span>);
  }).appendTo($body);</code></pre>  <br>이렇게 하면 이 문 제 를 해결 할 수 있 습 니 다. 또한 display: none 이 설정 때문에 iframe 은 텍스트 흐름 에서 벗 어 났 습 니 다. 그러면 이 iframe 을 불 러 오고 삭제 해도 텍스트 흐름 을 바 꾸 지 않 고 페이지 렌 더 링 을 촉발 하지 않 으 며 성능 이 좋 을 것 입 니 다.<br>마지막.<br>나 는 앞 에 수많은 구덩이 가 있다 고 믿 지만 지나 가면 쌓 인 문 제 를 분석 하고 문 제 를 해결 하 는 방법 이 나 로 하여 금 더욱 자신 감 을 가지 게 할 것 이다.젊은이 들 에 게 가장 중요 한 것 은 착실하게, 두 껍 게, 얇 게, 힘 내 는 것 이다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

전단 자동화 워 크 플 로 의 hooks

예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

개선: js iOS 위 챗 브 라 우 저의 title 수정

좋은 웹페이지 즐겨찾기