web-dev-qa-db-fra.com

Puis-je ouvrir une nouvelle fenêtre et la remplir avec une variable de chaîne?

Je me bats un peu avec quelque chose qui semble simple. J'ai une chaîne [javascript] qui contient des éléments DOM et je voudrais ouvrir une nouvelle fenêtre (window.open ()?) Et utiliser la chaîne pour remplir la nouvelle fenêtre. c'est-à-dire que le navigateur prenne la chaîne et la convertit en HTML à la volée. Est-ce possible?

javascriptjqueryhtmldom
24
arcadeRob

Oui c'est possible...

var wnd = window.open("about:blank", "", "_blank");
wnd.document.write(html);

Cela devrait faire l'affaire.

59
Reinstate Monica Cellio

HTML

La réponse d'Archer est bonne, mais vous pouvez le faire dans une seule ligne si vous le souhaitez:

window.open("data:text/html;charset=utf-8,"+html, "", "_blank")

Ouverture de XML?

window.open("data:text/xml;charset=utf-8,"+xml, "", "_blank")

Avec XML, assurez-vous que votre chaîne commence par <?xml version="1.0" encoding="UTF-8"?> et a un élément racine. Si ce n'est pas le cas, vous pouvez facilement l'ajouter:

window.open('data:text/xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8"?><RootTag>'+xml+'</RootTag>', "", "_blank")
7
Kevin Jantzer

La réponse d'Archer est la meilleure façon. Mais vous devez fermer le document pour exécuter les scripts à l'intérieur du "htmlString".

 var wnd = window.open("about:blank", "");
        wnd.document.write(htmlString);
        wnd.document.close();
4
livin tamil

Notez que si window.open Était une bonne solution en 2013, à ce stade ce n'est plus le cas, et window.open N'est plus la bonne réponse ici; il est devenu bloqué par défaut par presque tous les navigateurs en raison d'années d'abus par les publicités, et est considéré comme un mécanisme hérité qui contourne complètement l'historique du navigateur lorsqu'il fonctionne fonctionne.

Au lieu de cela, créez un élément d'ancrage de lien, assignez son contenu comme un uri de données, donnez-lui un target="_blank" Afin qu'il s'ouvre dans un nouvel onglet, puis déclenchez une click() dessus afin qu'il ouvre ce contenu comme une page Web normale avec une entrée normale dans l'historique du navigateur:

function openAsPageInNewTab(pageContent) {
  let encoded = encodeURIComponent(pageContent); 
  let a = document.createElement(`a`);
  a.target = `_blank`;
  a.href = `data:text/html;charset=utf-8,${encoded}`;
  a.style.display = `none`;
  document.body.appendChild(a); // We need to do this,
  a.click();                    // so that we can do this,
  document.body.removeChild(a); // after which we do this.
}

Vous pouvez bien sûr toujours recevoir un avertissement contextuel, car cela devrait, mais au moins vous faites maintenant les choses d'une manière qui respecte les utilisateurs et les navigateurs, contrairement à l'ancienne approche window.open.

1
Mike 'Pomax' Kamermans

Si vous avez besoin d'un nouvel onglet, vous pouvez l'utiliser.

const win = window.open('about:blank', '_blank');
win.document.write('<h1>test</h1>');
win.focus();
0
Ilya Kyrylov