HTML : Chrome의 이상한 탐색 요소

포털이란 무엇입니까?

HTML<portal> 요소에 대해 들어본 적이 없을 수도 있습니다. Chrome 75(2019년 6월)부터 실험적인 기능이며 제안이 초안 단계에 있습니다. 그러나 정확히 무엇입니까? 본질적으로 <portal>는 강화된 <iframe>와 같으며 포함된 콘텐츠로 원활하게 탐색할 수 있는 기능을 포함합니다.
<iframe> 와 유사하게 <portal> 에는 임베드하려는 페이지의 URL인 src 속성이 포함되며 임베드된 콘텐츠는 <iframe> 와 동일하게 보입니다. <portal>는 클릭할 수 있지만 대부분의 SPA 탐색 방식과 유사하게 미리 렌더링된 페이지로 원활하게 탐색하는 것이 목적이므로 상호 작용할 수 없습니다. 이는 소스에 대한 또 다른 요청 없이는 즉시 탐색할 수 없는 iframe과 다릅니다. 포털을 클릭하면 상위 문서의 하위 삽입으로 이미 로드되고 렌더링된 모든 콘텐츠로 바로 이동합니다.

포털의 멋진 점은 원본이 교차될 수 있다는 것입니다. 즉, 포함된 다른 도메인에 대한 포털을 만들 수 있습니다.

사용하는 방법

따라서 포털은 실험적이므로 Chromeabout://flags/#enable-portals에서 2개의 플래그를 활성화해야 합니다.

🚩 포털 활성화

🚩 원본 간 포털 활성화

Chrome은 브라우저를 다시 시작하라는 메시지를 표시하고 그렇게 한 후에 콘솔에서 사용 가능한 HTMLPortalElement 기능을 볼 수 있습니다.


이제 기본 포털을 만들어 봅시다! 이 HTML을 웹 페이지에 추가하는 것만큼 쉽습니다.

<portal src="https://theoatmeal.com"></portal>

높이, 너비 등을 조정하기 위해 이 요소에 스타일을 추가할 수 있지만 원시 형식에서는 포함된 The Oatmeal의 웹 페이지를 볼 수 있습니다. 포털을 클릭하면 소스 페이지로 즉시 이동하며 새 웹 페이지를 방문할 때 얻을 수 있는 일반적인 "깜박임"을 알아채지 않아도 됩니다.

멋을 내자

다음은 인기 있는 웹툰 목록을 만드는 사용 사례입니다. 콘텐츠의 각 블록은 만화의 미리보기 이미지를 표시하고 사용자가 그 위로 마우스를 가져가면 우리 코드는 웹툰의 페이지로 직접 이동하기 위해 클릭할 수 있는 포털을 렌더링합니다.



먼저 HTML:

<h2>Best Webcomics</h2>
<ol>
  <li>
    <h3>The Oatmeal</h3>
    <div 
      class="comic-container"
      data-src="https://theoatmeal.com/comics/forbidden_love"
    >
      <img src="/forbidden_love_big.png">
      <img class="spinner" src="/spinner.gif">
      <portal src=""></portal>
    </div>
  </li>

  <!-- Repeat lis for other webcomics -->
</ol>

포털에 대해 비어 있는src을 사용하고 있습니다. 불필요한 로딩을 피하기 위해 사용자가 .comic-container 이벤트를 통해 mouseenter 위로 마우스를 가져갈 때만 JavaScript에서 소스를 설정합니다. 소스가 로드되는 동안 스피너 오버레이를 표시하여 무언가 로드되고 있음을 보여주는 사용자 피드백이 있습니다. load 이벤트를 수신하여 완전히 로드되면 기존 이미지 위에 포털을 표시할 수 있습니다.

const blocks = document.querySelectorAll('.comic-container');
blocks.forEach(block => {
  block.addEventListener('mouseenter', e => {
    block.classList.add('hover');
    const portal = block.querySelector('portal');
    const { src } = block.dataset;
    portal.src = src;
  });

  // Add "mouseleave" listener to reset classes
});

const portals = document.querySelectorAll('portal');
portals.forEach(portal => {
  portal.addEventListener('load', e => {
    if (portal.closest('.comic-container').matches('.hover')) {
      portal.classList.add('show-portal');
    } 
  });
});

거기에서 사용자는 포털을 클릭하고 소스 페이지로 즉시 이동할 수 있습니다!

클릭 이벤트에 멋진 애니메이션을 만든 다음 portal.activate()를 호출하여 프로그래밍 방식으로 포털을 활성화하려는 경우 포털의 기본 클릭 동작을 방지할 수도 있습니다.

전체 코드 보기: https://github.com/doctafaustus/html-portal

마무리 생각

포털은 페이지를 미리 보고 미리 렌더링하는 새로운 방법을 제공하지만 브라우저에서 표준이 될지는 확실하지 않습니다. 보안에 대한 나의 첫 번째 생각은 포털이 "포털된"문서를 통해 사용자 상호 작용을 허용하지 않는다는 것을 읽고 안심했습니다. 또한 포함된 콘텐츠는 호스트 문서에 직접 액세스할 수 없습니다. 그러나 포털은 여전히 ​​영리한 브라우저 악용을 만들 수 있는 또 다른 기회를 제공하므로 건전한 콘텐츠 보안 정책(CSP)이 권장됩니다.

그럼에도 불구하고 그들은 여전히 ​​멋지다!



에야디야! 이런 바이트 크기의 팁을 자주 게시합니다. 당신이 더 간절히 원하면 나를 따르라! 🍿

나는 , TikTok에 있고 지금 새로운 debugging course을 가지고 있습니다!