ouvrir mon fichier reveal.js

Cosmos506
Les bases HTML/CSS
Outils
Javascript

Bonjour,

J'étais en train de faire une présentation reveal.js avec un fichier index.html sur live serveur de VS Code. En y pensant les présentations que je suis en train de faire pourrais me servir pour les cours. Le problème est que dès que j'ouvre mon index.html. avec un Ctrl+o sur Chrome, je ne vois rien sur ma page. La console comporte 7 erreurs les voici.

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///reveal/dist/reveal.esm.js. Raison : la requête CORS n’utilise pas HTTP.

L’URI de la source du module n’est pas autorisé dans ce document : « file:///reveal/dist/reveal.esm.js ». index.html:91:1

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///reveal/plugin/zoom/zoom.esm.js. Raison : la requête CORS n’utilise pas HTTP.

L’URI de la source du module n’est pas autorisé dans ce document : « file:///reveal/plugin/zoom/zoom.esm.js ». index.html:91:1

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///reveal/plugin/notes/notes.esm.js. Raison : la requête CORS n’utilise pas HTTP.

L’URI de la source du module n’est pas autorisé dans ce document : « file:///reveal/plugin/notes/notes.esm.js ». index.html:91:1

Cette page utilise la propriété non standard « zoom ». Envisagez d’utiliser calc() dans les valeurs des propriétés pertinentes ou utilisez « transform » avec « transform-origin: 0 0 ». index.html

Pouvez-vous m'aider ?
N'importe la manière, je veux juste que le fichier puisse fonctionner sur les ordinateurs de ma salle de cours.

Merci d'avance.

6 réponses

popotte
Réponse acceptée

Ah okay je vois:

        import Reveal from '/reveal/dist/reveal.esm.js'
        import RevealZoom from '/reveal/plugin/zoom/zoom.esm.js'
        import RevealNotes from '/reveal/plugin/notes/notes.esm.js'

Le problème vient de la, essayes comme ça:

        import Reveal from 'reveal/dist/reveal.esm.js'
        import RevealZoom from 'reveal/plugin/zoom/zoom.esm.js'
        import RevealNotes from 'reveal/plugin/notes/notes.esm.js'

ou comme ça

        import Reveal from './reveal/dist/reveal.esm.js'
        import RevealZoom from './reveal/plugin/zoom/zoom.esm.js'
        import RevealNotes from './reveal/plugin/notes/notes.esm.js'

si vraimentça fait toujours un probleme CORS, alors fais carrément ça

        import Reveal from 'http://127.0.0.1:5500/reveal/dist/reveal.esm.js'
        import RevealZoom from 'http://127.0.0.1:5500/reveal/plugin/zoom/zoom.esm.js'
        import RevealNotes from 'http://127.0.0.1:5500/reveal/plugin/notes/notes.esm.js'

Après bon c'est pas la meilleure façon d'installer Reveal, le mieux c'est de passer par NPM ou CD

Avec NPM t'as juste à faire npm install reveal.js en console puis placer les imports

  • import Reveal from 'reveal.js'
  • import Zoom from 'reveal.js/zoom/zoom.esm.js'
  • import Notes from 'reveal.js/notes/notes.esm.js'
Cosmos506
Auteur
Réponse acceptée

Le premier renvoie une erreur qui me dit de mettre un lien relatif.
Le deuxième me renvoie l'erreur CORS
Edit : le troisième ne marche que si j'ai lancé un live server auparavant

Merci à toi Popotte !

J'ai déjà pensé au NPM qui serait plus simple, je pense que je vais y passer.

En tout cas merci pour ton aide !

popotte

Hello :)

Alors il faudrait voir le code, sinon quand tu fais une requete, ou alors dans le head, il faut que tu ajjoutes le header access-control-allow-origin pour autoriser les requetes CORS

Regardes aussi l'url si tu utilises live server il faut que dans ton code tu fasses ta requete sur le même url que le liveserver (localhost:123...)

Cosmos506
Auteur

Salut !

Merci de ta réponse

  1. où est-ce-que je peux mettre le code access-control-allow-origin sachant que mon fichier est en HTML

  2. l'URL de live server est celui-ci http://127.0.0.1:5500/index.html, il ne comporte pas de localhost.

Faudrait-il que je crée un localhost sur l'ordi de ma salle de cours où est-ce qu'avec du code le problème peut être réglé ?

Merci d'avance.

popotte

ah non 127.0.0.1 et pareil que localhost, bah oublies localhost que j'ai dis, utilises 127.0.0.1 :p

Alors fais voir ton code que je te dise où le placer ^^

Cosmos506
Auteur 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reveal/dist/reveal.css">
    <link rel="stylesheet" href="reveal/dist/theme/serif.css">
    <style>
        .notes {
            font-size: 100px;
        }
        p {
            font-size: 25px;
        }
        .big-title {
            text-align: center ;
            margin: 0;
            border: #000 solid 1px;
        }
        .definition-title {
            text-decoration: underline;
        }
        .img-grid {
            display: grid;
            grid-template-columns: 33% 33% 33%;
        }
    </style>
</head>

<body>
    <div class="reveal">
        <div class="slides">
          <section>
            <h2>La prise de la bastille</h2>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae neque praesentium aliquid obcaecati. Necessitatibus eaque quo nam qui, impedit in voluptate tempora harum officia perspiciatis culpa vero unde dolor! Sunt?
            </p>
          </section>
          <section>
            <section data-transition="slide-out">
                <h2>Pourquoi ?</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur <strong><em>Louis XVI</em></strong> adipisicing elit. Fugiat dolorum et ad! Repellendus aperiam ad praesentium ut laborum harum porro? Eius vero aspernatur voluptatibus sit deleniti. Nulla placeat consequuntur quos.
                </p>
            </section>
            <section data-auto-animate>
                <h2>Définition</h2>
                <h5 class="definition-title"> Louis XVI</h5>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit iste adipisci doloremque excepturi deleniti maxime repellat minima rem totam, provident consectetur iusto quibusdam numquam laboriosam quod ratione? Accusantium, recusandae natus!
                </p>
            </section>
          </section>
        <section data-background-color="#6e6e6e">
            <h2>Sommaire</h2>
            <aside class="notes">
                crée en 1802 <br>
                asigné 1950 <br>
                marignant
            </aside>
            <ul>
                <li class="fragment">entré 1</li>
                <li class="fragment">entré 2</li>
                <li class="fragment">entré 3</li>
            </ul>
        </section>
        <section>
            <h2>titre</h2>
            <div class="img-grid">
                <p class="fragment" data-fragment-index="1" data-autoslide="3000">paris</p>
                <p class="fragment" data-fragment-index="2">Marseille</p>
                <a href="#/1/1" class="fragment" data-fragment-index="3">Lyon</a>
                <img src="img/Paris_-_Eiffelturm_und_Marsfeld2.jpg" alt="" width="400px" class="fragment" data-fragment-index="1">
                <img src="img/Sans titre.jpg" alt="" width="400px" class="fragment" data-fragment-index="2">
                <img src="img/France_Lyon_Quais_de_Sao__ne.jpg" alt="" width="400px" class="fragment" data-fragment-index="3">
            </div>
        </section>
        <section data-visibility="uncounted">
            <div class="r-stack">
                <img src="img/chien.jpg" alt="" class="fragment fade-out" data-fragment-index="0">
                <img src="img/Chat_roux_à_pelage_court..jpg" alt="" class="fragment current-visible"data-fragment-index="0">
                <img src="img/poisson.jpg" alt="" class="fragment">
            </div>
        </section>

        </div>
      </div>
    <script type="module">
        import Reveal from '/reveal/dist/reveal.esm.js'
        import RevealZoom from '/reveal/plugin/zoom/zoom.esm.js'
        import RevealNotes from '/reveal/plugin/notes/notes.esm.js'
        Reveal.initialize({
            backgroundTransition: 'fade',
            slideNumber: 'c/t',
            showSlideNumber: 'speaker',
            hash: true,
            plugins: [RevealNotes, RevealZoom]
        });
    </script>
</body>
</html>

Voilà ^^