recherche

Maison  >  Questions et réponses  >  le corps du texte

Ouvrir les documents de calcul à l'aide de window.open() et data: schéma

J'ai une page Web exécutée dans un navigateur qui génère un document HTML calculé que je souhaite ouvrir dans un nouvel onglet du navigateur.

La manière la plus simple et la plus sale est de procéder comme suit :

const w = window.open('', '_blank');
w.document.open();
w.document.write(htmlContents);
w.document.close();

C'est simple. Mais cela a des conséquences gênantes que je n'aime pas. Autrement dit, l'URL du nouvel onglet doit pointer quelque part , mais comme le nouveau document est calculé dynamiquement, il n'y a rien qui puisse pointer vers lui. Si je ne précise pas d'URL, il utilisera l'URL de ma page Web. Ainsi, si quelqu'un actualise l'onglet contenant le document généré, le document disparaît et une nouvelle instance de ma page Web est chargée à sa place. Cela peut dérouter les utilisateurs.

Je pense que ce qui répond le mieux à mes besoins, c'est d'utiliser l'URI des données. J'encode simplement l'intégralité du contenu de la page Web dans l'URI lui-même, puis j'utilise window.open() pour ouvrir cet URI. C'est moche, mais sémantiquement cohérent avec mon objectif : un document informatique autonome dans lequel on ne peut pas naviguer accidentellement lors de l'actualisation des pages.

J'ai construit pour cela un concept que je trouve très simple, comme suit : 

const doc = encodeURIComponent('<html><body><p>Hello, world!</p></body></html>');
window.open(`data:text/html;charset=utf-8,${doc}`, '_blank');

Si j'exécute ce code, une nouvelle fenêtre clignote sur l'écran pendant une image puis se ferme immédiatement. Aucune erreur ne s'est produite.

Qu'est-ce que j'ai fait de mal ?

P粉752479467P粉752479467260 Il y a quelques jours616

répondre à tous(1)je répondrai

  • P粉085689707

    P粉0856897072024-04-07 09:10:30

    Apparemment tous les navigateurs modernes bloquent intentionnellement l'utilisation de ces URI de données. merveilleux.

    Une autre coche au tableau est "La chose parfaite dont j'avais besoin nous a été récemment retirée". Bien.

    Du côté positif, cela semble faire mieux tout ce que je veux : 

    const html = '
    Hello, world!
    ';
const blob = new Blob([html], { type: 'text/html'});
const url = URL.createObjectURL(blob);
window.open(url, '_blank');

    répondre
    0
  • Annulerrépondre