web-dev-qa-db-fra.com

Document.body.innerHTML = "" efface-t-il la page Web?

Lorsque je rafraîchis la page ci-dessous dans FF 3.0, je m'attendais à ce que la page Web s'efface, mais ce n'est pas le cas.

Pourquoi document.body.innerHTML = "" effacer la page?

PDATE: J'essaie d'effacer l'écran précédent pendant une actualisation pendant le chargement de la nouvelle page. En fait, je veux voir la page claire, attendez, puis les prochains js s'exécutent. Je ne veux pas effacer l'écran une fois la page chargée.

...
<body>
    <script type="text/javascript">
        document.body.innerHTML = "";
        for (var i = 0; i < 1000000000; i++) {
        }
    </script>

    <img src="images/web.gif" /><br />

    <script type="text/javascript">
        document.write( "hello<br />");
    </script>

    <img src="images/warning.png" /><br />

</body>
javascriptfirefoxdominnerhtml
26
Tony_Henrich

document.body.innerHTML = ''; efface le body, oui. Mais il efface le innerHTML tel qu'il est au moment où le code est exécuté. Lorsque vous exécutez le code avant que les images et le script ne soient réellement dans le body, il essaie d'effacer le body, mais il n'y a rien à effacer.

Si vous voulez effacer le body, vous devez exécuter le code une fois que le body a été rempli de contenu. Vous pouvez le faire en plaçant le <script> bloquer en tant que dernier enfant de body, donc tout est chargé avant l'exécution du code, ou vous devez utiliser un moyen d'écouter le dom:loaded un événement.

44
Douwe Maan

Pour exposer la réponse de Douwem, dans votre balise de script, mettez votre code en onload:

<script type="text/javascript">
    window.onload=function(){
       document.body.innerHTML = "";
    }
</script>
14
Erik

Tout en étant d'accord avec les réponses de Douwe Maan et Erik, il y a quelques autres choses ici que vous pouvez trouver utiles.

Tout d'abord, dans vos balises head, vous pouvez référencer un fichier JavaScript séparé, qui est ensuite réutilisable:

<script language="JavaScript" src="/common/common.js"></script>

où common.js est votre fichier de fonction réutilisable dans un répertoire de niveau supérieur appelé common.

Deuxièmement, vous pouvez retarder le fonctionnement d'un script à l'aide de setTimeout, par exemple:

setTimeout(someFunction, 5000);

Le deuxième argument est en millisecondes. Je mentionne cela, car vous semblez essayer de retarder quelque chose dans votre extrait de code d'origine.

3
Rich Harding

Comme d'autres le disaient, une solution simple consiste à placer votre script en bas de la page, car tous les éléments DOM sont chargés de manière synchrone de haut en bas. Sinon, je pense que ce que vous cherchez est document.onload(() => {callback_body}) ou window.onload(() => {callback_body}) comme l'a dit Erik. Ceux-ci vous permettent d'exécuter votre script lorsque le dom:loaded l'événement est déclenché comme l'a dit Douwe Maan. Pas sûr des propriétés de window.onload, mais document.onload n'est déclenché qu'après le chargement de tous les éléments, css et scripts. Dans ton cas:

<script type="text/javascript">
    document.onload(() =>
        document.body.innerHTML = "";
    )
</script>
0
ThisGuyCantEven

Je ne suis pas sûr de ce que vous essayez de réaliser, mais vous voudrez peut-être envisager d'utiliser jQuery, qui vous permet de mettre votre code dans la balise head ou un fichier de script séparé et de toujours exécuter le code après le chargement du DOM.

Vous pouvez alors faire quelque chose comme:

$(document).ready(function() {
$(document).remove();
});

ainsi que la suppression sélective d'éléments (tous les DIV, uniquement les DIV avec certaines classes, etc.)

0
Andy Shellam