Javascript: ajouter l'élément iframe après la chargement de la page

En utilisant Javascript, je dois trouver le meilleur moyen d'ajouter un élément iframe qui est:

  1. Complètement caché de l'utilisateur.
  2. Créé après la chargement de la page. C'est-à-dire être complètement discret pour l'utilisateur et ne pas affecter le chargement d'images et d'autres scripts, etc.

Vous pouvez ajouter un iframe caché comme ceci:

 var iframe = document.createElement('iframe'); iframe.style.display = "none"; iframe.src = /* your URL here */; document.body.appendChild(iframe); 

Si vous devez le faire en charge de la page, vous pouvez simplement insérer le code pertinent dans une étiquette de script à la fin de votre document ou le brancher via load événement de load window ( window.onload = yourFunction; ), bien que l'événement de load window Arrive assez tard dans le processus de chargement de la page. Et bien sûr, comme beaucoup de choses impliquant JavaScript sur les navigateurs, vous pouvez trouver que votre vie est un peu plus facile si vous utilisez une bibliothèque comme Prototype , jQuery , Closure ou l' une ou l' autre de plusieurs autres , car cela peut lisser les différences de navigateur. (Cela dit, le code ci-dessus fonctionnera sur tout navigateur que je connais.) Les bibliothèques proposent généralement une façon de faire les choses dès que la page est chargée, mais plus tôt que le load window se produit généralement. JQuery fournit la fonction ready ; Prototype fournit l'événement dom:loaded ; etc.

Par exemple, si vous mettez ceci à la fin de votre étiquette de body , il créera l'iframe après que tout le reste a été chargé (y compris toutes les images, la load window ne se déclenche que lorsque toutes les images ont été chargées):

 <script type='text/javascript'> window.onload = function() { var iframe = document.createElement('iframe'); iframe.style.display = "none"; iframe.src = /* your URL here */; document.body.appendChild(iframe); }; </script>