google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Utiliser DOM pour ins?rer des fichiers JavaScript externes Dans cet article, JavaScript tutorial , ACC @ nk est heureux de vous montrer une autre solution ? JavaScript include external JavaScript files dans vos pages web Cette m?thode utilise JavaScript DOM ( Document Object Model ) pour traiter S'il vous pla?t aller ? la poste - page int?rieure pour les instructions compl?tes termin?e et le code source JavaScript pour les ?chantillons , ainsi que les probl?mes r?alit?, de nombreux
Simple Tips and Code to Load External JavaScript, CSS Files Dynamically

? Chargement externe CSS et JavaScript fichiers plus rapidement avec PHP mod_rewrite

? Comment utiliser un JavaScript externe

? La meilleure fa?on de charge externe JavaScript


Étiquette: DOM, externes fichier JavaScript, Document Object Model, Solution JavaScript

Gratuit iPage hébergement Web pour la première année MOMENT



Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage.
Essayez iPage GRATUIT première année MOMENT

This page shows you how to use javascript (js) to insert a html that contains js code and have that js code run. If you don't know how to insert a element using js, see: Adding HTML Content with Javascript.

The Problem

There are lots js based widgets today. For example, web share widget, Google search widget, Comment widget, twitter, facebook, amazon ads... etc. They let you easily add functionality to your site.

If your webpage is static html, or generated by php or content manager software, you can directly include these widgets at the right place at the server side. However, sometimes it is convenient to use a js to insert them. Because, you may want the location of the widget to be different for different pages. Or, only centain pages you want to include the widget, but you don't know which until the page is generated.

So, the solution is to use a client side js that insert these js widgets.

If you use a javascript to insert a js code xyz, will the newly inserted xyz script run?

It depends on how you construct the element to be inserted. If the 「<script...>...</script>」 is constructed using 「innerHTML = ...」, then it won't work. But if it is constructed as a DOM element, then it'll work.

Using innerHTML Does Not Work

First, let's see what happens if you don't do anything special.

Suppose you want to use js to insert the following js code.

<div class="xyz">
 <p>Fantastic!</p>
 <script type="text/javascript">alert("woot!");</script>

</div>

Suppose you do it this way:

var myElement = document.createElement("div"); // create new div element

myElement.setAttribute("class", "xyz"); // add a class attribute


// add html in the div element
myElement.innerHTML='<p>Fantastic!<\/p> <script type="text/javascript">alert("woot!");<\/script>';

// add the new element after the first p tag
document.body.insertBefore(myElement, (document.getElementsByTagName("p"))[0]);

It will fail in IE8, Google Chrome, Opera. (but works in Firefox 3.6.12).

You can see what your browser do here: insert_js.html. For a version where each js file is on its own page, see: js_insert_js.html.

Creating 「<script>」 Object by createElement

Here's how to make it work. It's easy. Instead of using 「myElement.innerHTML="<script>...</script>";」, you should create the “script” element as a DOM object, then you insert this object.

Here's a sample js code:

var ele = document.createElement("script");
ele.type = "text/javascript";
ele.innerHTML='alert("woot!");'

document.body.insertBefore(ele, (document.getElementsByTagName("p"))[0]);

Here's a test page using this code: js_insert_js_works.html.

Twitter Example

Suppose you want to insert this code:

<div class="twtr">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="xah_lee">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

It's a widget that shows a Twitter button with number of tweets of the page.

Here's how you do it in your js:

// insert a twitter div tag before element “cg”
function insertTwitter (cg) {
    var mdv = document.createElement("div");
    mdv.setAttribute("class", "twt");

    mdv.innerHTML='<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="xah_lee">Tweet</a>';

    var ele = document.createElement("script");
    ele.type = "text/javascript";
    ele.src = "http://platform.twitter.com/widgets.js";

    mdv.appendChild(ele);

    document.body.insertBefore(mdv, cg);

}


// insert before the first p tag
insertTwitter((document.getElementsByTagName("p"))[0]);

Thanks to “idealmachine” and DVK. stackoverflow.com.

JavaScript par jour


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web