Support the ongoing development of Laravel.io →
Laravel Views Requests

Im making an app with laravel using livewire to make an SPA. I've created several full page components and I navigate between them using the wire:navigate directive. I also have a div with an Iframe in the parent layout that is encapsuled in an @persist livewire directive that I dont want to refresh. My problem is that everytime I click in a wire:navigate link to navigate between pages the iframe refreshes. I change the div's background color programmatically on the run and when I navigate between pages the background color persists but the iframe inside this div keeps reloading. Why is this happening? Please help, I can't find any hint on Internet.

The code looks like this:

main.blade.php (Parent layout):

<div id="app" class="col-md-12 d-flex align-items-center justify-content-center flex-column p-0">
    <div class="col-md-8 p-0">
        <livewire:nav-bar :$pageTitle/>    
        <button id="shrink-videocall" onclick="shrinkVideocallWindow()" class="align-items-center justify-content-center" style="display: none;"><i class="fa-solid fa-minimize"></i></button>
        <button id="minimize-videocall" onclick="closeVideocallWindow()" class="align-items-center justify-content-center" style="display: none;"><i class="fa-solid fa-minus"></i></button>
        @persist('videocall')
        <div id="videocall-window" class="videocall-window window-fullscreen p-0 m-0 align-items-center justify-content-center" style="display: none;">
            <div id="videocall-node"><iframe src="https://[..].com" frameborder="0"></iframe></div>
        </div> 
        @endpersist 
        {{ $slot }}
        @persist('chat')
        <livewire:group-chat/>
        @endpersist
    </div>
</div>

nav-bar.blade.php

<div id="navbar-menu" class="col-xl-6 col-lg-9 col-md-10 col-sm-12 justify-content-center align-items-center flex-column" style="display: none;">
    <div id="navbar-options" class="col-md-12 d-flex justify-content-start align-items-center flex-wrap p-0">
        <a wire:navigate href="/" class="navbar-link @if(request()->routeIs('home')) navbar-current-page @endif d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">@if(request()->routeIs('home')) <i class="fa-solid fa-caret-right"></i> @endif Inicio</h6>
            <i class="nav-options-icon fa-solid fa-house"></i>
        </a>
        <a wire:navigate href="/patients" class="navbar-link @if(request()->routeIs('patients')) navbar-current-page @endif d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">@if(request()->routeIs('patients')) <i class="fa-solid fa-caret-right"></i> @endif Pacientes</h6>
            <i class="nav-options-icon fa-solid fa-user"></i>
        </a>
        <a wire:navigate href="/appointments" class="navbar-link @if(request()->routeIs('appointments')) navbar-current-page @endif d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">@if(request()->routeIs('appointments')) <i class="fa-solid fa-caret-right"></i> @endif Citas</h6>
            <i class="nav-options-icon fa-solid fa-calendar-days"></i>
        </a>
        <a onclick="" class="navbar-link d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">Ajustes</h6>
            <i class="nav-options-icon fa-solid fa-gear"></i>
        </a>
    </div>
</div>

I've tried data-navigate-once for scripts and persist for the html elements and works for everything but the iframe.

0

Sign in to participate in this thread!

Eventy

Your banner here too?

Bardia Aminai bardia Joined 16 May 2024

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.