Turbo:load event not firing for links inside of the turbo frame

1

I’m integrating Hotwired with an application and have noticed that both the turbo:load and turbo:render events aren’t fired when navigating using links within the Turbo Frame. For example take the following two pages as an example.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="module">
    import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo@7.3.0';
    document.addEventListener('turbo:load', () => {
      console.log('turbo:load');
    });
  </script>
</head>
<body>
  
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about.html">About</a></li>
    </ul>
  </nav>

  <turbo-frame id="body">
    <header>
      <h1>Home</h1>
    </header>
    <article>
      <p><a href="/about.html">about</a></p>
    </article>
  </turbo-frame>

</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="module">
    import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo@7.3.0';
    document.addEventListener('turbo:load', () => {
      console.log('turbo:load');
    });
  </script>
</head>
<body>

  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about.html">About</a></li>
    </ul>
  </nav>

  <turbo-frame id="body">
    <header>
      <h1>About</h1>
    </header>
    <article>
      <p><a href="/">back home</a></p>
    </article>
  </turbo-frame>
  
</body>
</html>

When navigating the pages by using the links inside the nav outside of the frame the events fire fine, but when using the links inside the frame they don’t fire. I can see when looking at Dev Tools that the pages are loaded with Turbo using fetch and not a page load, but the event is not firing.

I can’t work out if this is expected or I have done something wrong here. Can anyone help?

2

Looking at https://turbo.hotwired.dev/reference/events#frames there are separate events for document and frames/streams.

3

Thanks @Marcel031! That was the issue, I thought I had read through every line of the documentation but couldn’t find the answer!