如何实现用户打开指定页面后触发Flash通知且每次打开均显示？

Got it, let's walk through how to implement this flash notification that shows up every time a user visits Page A. I'm assuming you're working with a Rails app since you mentioned flash[:note]—here's the step-by-step breakdown:

First, we need to make sure the flash message is populated every single time the user accesses Page A. Unlike standard flash messages that clear after one request, we’ll explicitly set it in the controller action for Page A so it’s there on every visit:

def page_a
  # Fetch your Page A record (adjust this to match your app's logic)
  @page_a = PageA.find(params[:id]) 
  # Set the flash message with the note from Page A
  flash[:note] = @page_a.note_message
end

This ensures that no matter how the user gets to Page A (via link, refresh, or direct URL), the message is ready to be displayed.

Next, we’ll add the HTML for the flash notification in your view, then use JavaScript to display it once the page is fully loaded.

Add the Flash HTML #

Put this in your page_a.html.erb view (or a shared partial like _flash.html.erb if you want to reuse it across pages):

<!-- Flash notification container (hidden by default) -->
<div id="flash-note" style="display: none; padding: 1rem; background-color: #e3f2fd; border: 1px solid #bbdefb; border-radius: 4px; margin-bottom: 1rem;">
  <%= flash[:note] %>
</div>

Add JavaScript to Show It on Load #

We’ll use JavaScript to check for the flash element and show it once the page is ready. If you’re using vanilla JS, add this either directly in the view or your application-wide JS file:

// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', function() {
  const flashNote = document.getElementById('flash-note');
  // Only show if the message isn't empty
  if (flashNote && flashNote.textContent.trim() !== '') {
    flashNote.style.display = 'block';
    
    // Optional: Auto-hide after 5 seconds (remove this if you want it to stay)
    setTimeout(() => {
      flashNote.style.display = 'none';
    }, 5000);
  }
});

For Turbo (Rails 7+ Users) #

If your app uses Turbo, the DOMContentLoaded event won’t fire on every page visit (since Turbo replaces page content instead of reloading the whole page). Use the turbo:load event instead:

document.addEventListener('turbo:load', function() {
  const flashNote = document.getElementById('flash-note');
  if (flashNote && flashNote.textContent.trim() !== '') {
    flashNote.style.display = 'block';
    
    // Optional auto-hide
    setTimeout(() => {
      flashNote.style.display = 'none';
    }, 5000);
  }
});

• Every Visit: By setting flash[:note] in the controller action every time Page A is accessed, the message is always available when the page loads.
• Post-Load Display: The JavaScript waits until the page is fully loaded before showing the notification, so it doesn’t interfere with page rendering.

内容的提问来源于stack exchange，提问作者Merkelst