2010-12-09 3 views
0

J'ai une page html qui charge une autre page html dans l'une de ses divs via Ajax. Quelque chose comme:Comment accéder aux variables javascript dans une page html chargée dynamiquement?

page html de base:

<html> 
    <head> 
    <script type='text/javascript'> 
     var greeting = "Hello"; 
    </script> 
    </head> 
    <body> 
    <div id="details-main-content"> 
    </div> 
    </body> 
</html> 

page qui est chargé dans celui ci-dessus (utilise django templating donc tout ce qui est placé dans le bloc « tête » se retrouve dans la balise « tête » du page de base):

{% block head %} 
    <script type="text/javascript" language="javascript"> 
    alert("Greeting: " + greeting); 
    </script> 
{% endblock %} 
<div> 
    Hello, world! 
</div> 

Le contenu enfant est chargé quand un bouton est cliqué, via une fonction Javascript (JQuery en utilisant), comme ceci:

function loadContent(url) { 
    // Load external content via AJAX. 
    $('.details-main-content').load("/foo.html", function(){   
    }); 
} 

La page se charge correctement, le contenu enfant s'affiche exactement souhaité, à l'intérieur de la page modèle.

Est-il possible d'accéder aux variables JS dans la page de base à partir de la page intérieure (puisque la page intérieure est nichée à l'intérieur de la page externe)?

Toute aide est grandement appréciée.

Merci

EDIT:

Je pense que la question que j'avais été en raison d'avoir la ligne suivante dans la de la page html de base:

var gender = null; 
var age = null; 

qui, à chaque fois une nouvelle page serait chargée via la fonction load(), serait ré-initier les variables à null. Oups

Répondre

1

Oui. C'est juste une seule page, avant et après le chargement (qui utilise XMLHttpRequest). A titre d'exemple simple, si vous aviez:

var message = "Annoying message"; 

vous pourriez avoir

<a href="#" onclick="alert(message);">Message</a> 

dans la page intérieure.

EDIT: Si vous rencontrez des problèmes, il pourrait être dû à la question notée sur la documentation jQuery load:

Au cours de ce processus, les navigateurs souvent éléments filtrants du document tel comme <html>, <title>, ou <head> éléments. Par conséquent, les éléments récupérés par .load() ne peuvent pas être exactement comme si le document était récupéré directement par le navigateur .

+0

Puis-je définir les variables définies dans la page externe à partir de la page intérieure? J'essayais cela hier soir et ça ne semblait pas fonctionner pour moi. – Cuga

+0

Merci pour l'aide. Je pense que j'ai dépassé le problème que j'avais - voir la modification dans le message original. – Cuga

1

Il n'y a pas de page "interne" et "externe" dans votre exemple. Vous travaillez simplement avec une seule page, dont le contenu est chargé dynamiquement, mais il n'est pas traité différemment par le navigateur.

+0

Donne un sens, merci de clarifier. – Cuga

Questions connexes