Empêcher le focus lors d'un hover sur une iframe (GoogleMaps, OSM..)

Soumis par Robin le mer 08/07/2020 - 21:55

C'est toujours chiant de scroller sa page tranquillement et de se retrouver empatouillé dans une iframe. Je pensais qu'il y aurait des solutions tout simple, mais j'ai rien trouvé de mieux qu'une bonne vieille bricole :

Le HTML

<div class="embed-responsive embed-responsive-16by9">
    <div class="container-iframe-osm">
        <iframe class="embed-responsive-item" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{{ map_url }}" style="border: 1px solid black"></iframe>
    </div>
</div>

Le sass

// S'affichera devant les iframe openstreetmap pour désactiver le zoom
.container-iframe-osm::before
    content: ''
    z-index: 1
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    cursor: pointer
// On libère le zoom suite à un click (ajout de la classe en JS)
.container-iframe-osm.clicked::before
    content: none

Le JS

// Libère le zoom sur la map
$('.container-iframe-osm').on('click touchstart', (e) => {
    const $clickedContainer = $(e.currentTarget);
    $clickedContainer.addClass('clicked');
    // Et le redésactive lorsqu'on sort de l'iframe
    $clickedContainer.on('mouseleave touchleave', () => {
        $clickedContainer.removeClass('clicked');
    });
});

iframe
front