web-dev-qa-db-fra.com

Ajouter du contenu dans une nouvelle fenêtre ouverte

Je ne sais pas comment résoudre ce problème, j'ai essayé de lire beaucoup de messages mais je n'y ai pas répondu.

J'ai besoin d'ouvrir une nouvelle fenêtre avec une page déjà codée (à l'intérieur du même domaine) et d'ajouter du contenu.

Le problème est que si j'utilise OpenWindow.write(), la page n'est pas encore chargée ou elle écrase tout et seul le code ajouté par l'intermédiaire de l'écriture apparaît.

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
OpenWindow.document.write(output);

output est le code que je dois ajouter.

J'ai besoin que cela fonctionne au moins sur Firefox, IE et GC.

Merci d'avance. Ce n'est pas un problème si j'ai besoin d'utiliser JQuery.

javascriptjqueryhtml
40
Mario Corchero

dans parent. html:

<script type="text/javascript">
    $(document).ready(function () {
        var output = "data";
        var OpenWindow = window.open("child.html", "mywin", '');
        OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html
        OpenWindow.init();
    });
</script>

dans child.html:

<script type="text/javascript">
    var dataFromParent;    
    function init() {
        document.write(dataFromParent);
    }
</script>
26
Ray Cheng

Lorsque vous souhaitez ouvrir un nouvel onglet/fenêtre (dépend des paramètres de configuration de votre navigateur):

output = 'Hello, World!';
window.open().document.write(output);

Lorsque la sortie est un Object et que vous souhaitez obtenir du code JSON, par exemple (peut également générer tout type de document, même une image codée en Base64)

output = ({a:1,b:'2'});
window.open('data:application/json;' + (window.btoa?'base64,'+btoa(JSON.stringify(output)):JSON.stringify(output)));

Mise à jour

Google Chrome (60.0.3112.90) bloque ce code:

Not allowed to navigate top frame to data URL: data:application/json;base64,eyJhIjoxLCJiIjoiMiJ9

Lorsque vous souhaitez ajouter des données à une page existante

output = '<h1>Hello, World!</h1>';
window.open('output.html').document.body.innerHTML += output;

output = 'Hello, World!';
window.open('about:blank').document.body.innerText += output;
51
iegik

Voici ce que vous pouvez essayer

  • Ecrivez une fonction dis init () dans mypage.html qui fait le truc HTML (ajouter ou quoi que ce soit)
  • au lieu de OpenWindow.document.write(output); appelez OpenWindow.init() lorsque le dom est prêt

Donc, la fenêtre parent aura

    OpenWindow.onload = function(){
       OpenWindow.init('test');
    }

et chez l'enfant

    function init(txt){
        $('#test').text(txt);
    }
7
Sethunath

Quand vous appelez document.write après le chargement d’une page, tout le contenu sera éliminé et remplacé par le paramètre fourni. Utilisez plutôt les méthodes DOM pour ajouter du contenu, par exemple:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
var text = document.createTextNode('hi');
OpenWindow.document.body.appendChild(text);

Si vous voulez utiliser jQuery, vous aurez de meilleures API à gérer. Par exemple:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).append('<p>hi</p>');

Si vous avez besoin que le code soit exécuté une fois que le DOM de la nouvelle fenêtre est prêt, essayez:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).ready(function() {
    $(OpenWindow.document.body).append('<p>hi</p>');
});
3
TJ VanToll

Si vous souhaitez ouvrir une page ou une fenêtre avec l'envoi de données POST ou une méthode GET), vous pouvez utiliser un code comme celui-ci:

$.ajax({
    type: "get",  // or post method, your choice
    url: yourFileForInclude.php, // any url in same Origin
    data: data,  // data if you need send some data to page
    success: function(msg){
                console.log(msg); // for checking
                window.open('about:blank').document.body.innerHTML = msg;  
               }
});
2
Erkan Özkök