Créer une nouvelle fenêtre en utilisant jquery

Je travaille sur un petit projet en JavaScript/jQuery.Créer une nouvelle fenêtre en utilisant jquery

Pour afficher les résultats d'un calcul fait en javascript, je voudrais ouvrir une nouvelle fenêtre avec un contenu prédéfini et modifier ce contenu pour afficher les résultats: Im en utilisant le code comme ceci:

var resultwindow = window.open('result.html') 
var doc = $('body', resultwindow.document); 
doc.append("<p>Result</p>")

Cela ne fonctionne pas car le document de résultat n'est pas encore chargé lorsque j'ajoute le contenu, il est donc remplacé par le contenu de 'result.html'.

J'ai aussi essayé

$(resultwindow.document).ready(function() { 
    // ... Fill result document here 
})

$(resultwindow.document).load(function() { 
    // ... Fill result document here 
})

mais ready() ne fonctionne que sur le document en cours (il est appelé immédiatement, si le document en cours est déjà chargé), et ne le fait pas load être appelé du tout. Peut-être que quelqu'un peut me diriger vers la bonne direction. Merci d'avance!

EDIT:

J'ai finalement résolu ce problème en créant le nouveau document « à la main » en Javascript comme:

w = window.open('','newwinow','width=800,height=600,menubar=1,status=0,scrollbars=1,resizable=1); 
d = w.document.open("text/html","replace"); 
d.writeln('<html><head>' + 
    '<link rel="stylesheet" type="text/css" href="style.cs"/></head>' + 
    +'<body></body></html>'); 
// use d to manipulate DOM of new document and display results

Si je devais faire la même chose aujourd'hui (deux ans d'expérience plus tard), j'utiliserais une bibliothèque de templates Javascript comme Handlebars pour maintenir un template et le compiler en javscript.

Source

2010-10-21 MartinStettner

Martin avez-vous eu ce travail? J'ai un problème similaire. – Shaunak

@Shaunak J'ai posté ma solution d'il y a deux ans comme éditer à la question, a également mentionné comment je le résoudrais aujourd'hui ... hth. – MartinStettner

Envoyez les données à result.html dans la chaîne de requête, puis affichez les données à partir de result.html. Si vous voulez être moins évident à ce sujet, vous pouvez hacher les données dans la chaîne de requête et faire en sorte que la page de résultats le dégrade.

Source

2010-10-21 17:57:45 Harv

Le logiciel doit également fonctionner hors ligne uniquement à partir du système de fichiers (c'est-à-dire sans serveur Web). Par conséquent, votre suggestion n'est pas une option, je pense. Merci quand même. – MartinStettner

Vous ne savez pas pourquoi vous souhaitez créer une page Web ou une série de pages Web qui ne sont pas hébergées sur un serveur Web. – Harv

Le problème que vous avez est que load() ne fait pas ce que vous pensez qu'il fait.

À la place, utilisez bind("load", function() { /* Your function here */ }); puis tout devrait fonctionner.

Correction:

load() est en fait une fonction à double usage - si elle est appelée avec une fonction comme premier paramètre, il se lie à l'événement de chargement de l'objet (ou des objets) en question, sinon il charge les données retournées (le cas échéant) dans les éléments en question. Voir la réponse de Josh pour le réel raison pour laquelle cela ne fonctionne pas.

Source

2010-10-21 18:01:31

Mauvais. Le ['load'] (http://api.jquery.com/load-event/) dans jQuery est assez intelligent. Il se déclenche en fonction des paramètres transmis. Ainsi, si vous passez une fonction uniquement, il sait que vous voulez dire l'événement onload. Si vous transmettez tous les paramètres requis pour un appel AJAX, il le fait. –

Alors, est-ce que c'est faux ou est-ce simplement syntaxiquement plus long? – Harv

@Harv C'est faux. La charge aurait dû fonctionner correctement pour l'OP, et il y a une raison pour laquelle cela n'a pas fonctionné. Voir ma réponse pour une explication détaillée. –

Votre appel load ne fonctionne pas car vous tentez de gérer la charge du document, et les chances sont que le document n'existe même pas à ce stade. Ce qui signifie que vous passez null dans jQuery, et il vous ignore gracieusement. Gérez l'événement de chargement de la référence de fenêtre brute à la place, et alors vous devriez être bon pour aller ...

var win = window.open("result.html"); 
$(win).load(function() { 
    $("body").append("<p>Result</p>"); 
});

Source

2010-10-21 18:13:08

Malheureusement, le gestionnaire d'événements n'est jamais appelé. Le débogueur révèle également que, au moins dans Chrome, l'objet document existe déjà mais est vide ("about: blank"). – MartinStettner

Créer une nouvelle fenêtre en utilisant jquery

Répondre

Questions connexes