web-dev-qa-db-fra.com

Inclure un autre fichier HTML dans un fichier HTML

J'ai 2 fichiers HTML, supposons a.html et b.html. Dans a.html je veux inclure b.html.

En JSF, je peux le faire comme ça:

<ui:include src="b.xhtml" />

Cela signifie que dans le fichier a.xhtml, je peux inclure b.xhtml.

Comment pouvons-nous le faire dans le fichier *.html?

530
lolo

À mon avis, la meilleure solution utilise jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

Cette méthode est une solution simple et propre à mon problème.

La documentation jQuery .load() est ici .

604
lolo

Ma solution est semblable à celle de lolo ci-dessus. Cependant, j'insère le code HTML via le fichier document.write de JavaScript au lieu d'utiliser jQuery:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

JQuery.js a une taille de ~ 90 Ko, et j’aimerais garder la quantité de données à charger aussi petite que possible.

Pour obtenir le fichier JavaScript correctement échappé sans trop de travail, vous pouvez utiliser la commande sed suivante:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Ou utilisez simplement le script bash pratique suivant, publié en tant que Gist sur Github, qui automatise tout le travail nécessaire en convertissant b.html en b.js: https://Gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Crédits à Greg Minshall pour la commande sed améliorée qui échappe également aux barres obliques et aux guillemets simples, ce que ma commande sed d'origine ne tenait pas compte.

131
Tafkadasoh

En développant la réponse de lolo d’en haut, voici un peu plus d’automatisation si vous devez inclure beaucoup de fichiers:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

Et puis pour inclure quelque chose dans le HTML:

<div data-include="header"></div>
<div data-include="footer"></div>

Ce qui inclurait les fichiers views/header.html et views/footer.html

114
mhanisch

Commander HTML5 importations via le didacticiel Html5rocks Et sur polymer-project

Par exemple:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
77
user1587439

Prise éhontée d'une bibliothèque que j'ai écrite résoudre ce problème.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Ce qui précède prendra le contenu de /path/to/include.html et remplacera la div par celui-ci.

57
Michael Marr

Une directive include côté serveur simple pour inclure un autre fichier présent dans le même dossier se présente comme suit:

<!--#include virtual="a.html" --> 
44
Webdesign7 London

A très ancienne solution Je répondais à mes besoins à l'époque, mais voici comment procéder: code conforme aux normes:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
33
Aleksandar Vacić

Pas besoin de scripts. Pas besoin de faire des trucs fantaisistes côté serveur (mais ce serait probablement une meilleure option)

<iframe src="/path/to/file.html" seamless></iframe>

Puisque les anciens navigateurs ne prennent pas en charge la transparence, vous devriez ajouter des CSS pour résoudre ce problème:

iframe[seamless] {
    border: none;
}

Gardez à l'esprit que pour les navigateurs qui ne prennent pas en charge la transparence, si vous cliquez sur un lien dans l'iframe, le frame se dirigera vers cette URL, pas vers la fenêtre entière. Une façon de contourner ce problème est d’avoir target="_parent" sur tous les liens, mais le support du navigateur est «suffisant».

28
bjb568

Au lieu de cela, si vous avez accès au fichier .htaccess sur votre serveur, vous pouvez ajouter une directive simple qui permettra à php d'être interprété sur les fichiers se terminant par l'extension .html.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Maintenant, vous pouvez utiliser un simple script php pour inclure d'autres fichiers tels que:

<?php include('b.html'); ?>
16
rtd1123

Après fonctionne si le contenu HTML de certains fichiers doit être inclus: Par exemple, la ligne suivante inclura le contenu de piece_to_include.html à l’emplacement de la définition de OBJECT.

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Référence: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

12
CoolDude

C'est ce qui m'a aidé. Pour ajouter un bloc de code HTML de b.html à a.html, cela devrait aller dans la balise head de a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Ensuite, dans la balise body, un conteneur est créé avec un identifiant unique et un bloc javascript pour charger le b.html dans le conteneur, comme suit:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>
8
Ramtin

Vous pouvez utiliser un polyfill d’importations HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ), ou cette solution simplifiée https://github.com/ dsheiko/html-import

Par exemple, sur la page, vous importez un bloc HTML comme suit:

<link rel="html-import" href="./some-path/block.html" >

Le bloc peut avoir ses propres importations:

<link rel="html-import" href="./some-other-path/other-block.html" >

L'importateur remplace la directive par le code HTML chargé à peu près comme SSI

Ces directives seront automatiquement servies dès que vous chargerez ce petit JavaScript:

<script async src="./src/html-import.js"></script>

Il traitera les importations lorsque DOM sera prêt automatiquement. En outre, il expose une API que vous pouvez utiliser pour une exécution manuelle, pour obtenir des journaux, etc. Prendre plaisir :)

7
Dmitry Sheiko

Je sais que c'est un article très ancien, certaines méthodes n'étaient donc pas disponibles à l'époque… .. Mais voici ma version très simple (basée sur la réponse de Lolo).

Il s'appuie sur les attributs HTML5 data- * et est donc très générique car il utilise la fonction for-each de jQuery pour obtenir chaque "classe-load" correspondante. "

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>
7
Ben Mc

Dans w3.js, vous trouverez des travaux comme celui-ci:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
6
Kaj Risberg

Pour insérer le contenu du fichier nommé:

<!--#include virtual="filename.htm"-->
6
St.Eve

La réponse de l’Athari (la première!) Était trop concluante! Très bon!

Mais si vous souhaitez passer le nom de la page à inclure en tant que paramètre d'URL, cet article a une solution très pratique à utiliser combinée avec:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Cela devient alors quelque chose comme ceci:

Votre URL: 

www.yoursite.com/a.html?p=b.html

Le code a.html devient maintenant:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }​
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Cela a très bien fonctionné pour moi! J'espère avoir aidé :)

5
Massa

La plupart des solutions fonctionnent, mais elles ont un problème avec jquery:

Le problème est le suivant: le code $(document).ready(function () { alert($("#includedContent").text()); } n'alerte rien au lieu de signaler le contenu inclus.

J'écris le code ci-dessous, dans ma solution, vous pouvez accéder au contenu inclus dans la fonction $(document).ready:

(La clé charge le contenu inclus de manière synchrone).

index.htm:

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc:

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery include plugin on github

5
Amir Saniyan

html5rocks.com a un très bon tutoriel sur ce sujet, et c'est peut-être un peu tard, mais je ne savais pas que cela existait. w3schools a également un moyen de le faire en utilisant sa nouvelle bibliothèque appelée w3.js. Le fait est que cela nécessite l’utilisation d’un serveur Web et d’un objet HTTPRequest. Vous ne pouvez pas réellement les charger localement et les tester sur votre ordinateur. Ce que vous pouvez faire, c’est utiliser les polyfill fournis sur le lien html5rocks en haut ou suivre leur tutoriel. Avec un peu de magie JS, vous pouvez faire quelque chose comme ceci:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Cela fera que le lien (peut être changé pour être l'élément de lien recherché s'il est déjà défini), définisse l'importation (à moins que vous ne l'ayez déjà), puis l'ajoute. Il va ensuite prendre cela et analyser le fichier en HTML, puis l'ajouter à l'élément souhaité sous un div. Tout cela peut être modifié pour s’adapter à vos besoins, de l’ajout d’un élément au lien que vous utilisez. J'espère que cela a aidé, cela peut ne plus être pertinent maintenant si de nouvelles méthodes plus rapides sont apparues sans utiliser de bibliothèques et de frameworks tels que jQuery ou W3.js.

UPDATE: Cela générera une erreur indiquant que l'importation locale a été bloquée par la stratégie CORS. Il faudra peut-être avoir accès au Web en profondeur pour pouvoir l'utiliser en raison des propriétés du Web en profondeur. (Ce qui signifie pas d'utilisation pratique)

4
SubLock69

Vous pouvez le faire avec la bibliothèque JavaScript de jQuery comme ceci:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Veuillez noter que banner.html doit se trouver sous le même domaine que vos autres pages. Sinon, vos pages Web refuseront le fichier banner.html en raison de Partage de ressources d'origine multiple policies.

De plus, veuillez noter que si vous chargez votre contenu avec JavaScript, Google ne pourra pas l'indexer. Ce n'est donc pas une bonne méthode pour des raisons de référencement.

3
AndrewL64

Il n'y a pas de solution HTML directe pour la tâche pour l'instant. Même HTML Imports (qui est en permanence in draft) ne fera pas l'affaire, car Import! = Include et de la magie JS seront nécessaires de toute façon.
J'ai récemment écrit un script VanillaJS qui sert uniquement à l'inclusion de HTML dans HTML, sans aucune complication. 

Il suffit de placer dans votre a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>  

C'est open-source et peut donner une idée (j'espère)

3
al.scvorets

Voici un excellent article , Vous pouvez implémenter une bibliothèque commune et simplement utiliser le code ci-dessous pour importer des fichiers HTML sur une seule ligne. 

<head>
   <link rel="import" href="warnings.html">
</head>

Vous pouvez également essayer Google Polymer

2
Dhiral Pandya

D'après la réponse de https://stackoverflow.com/a/31837264/4360308 .__, j'ai implémenté cette fonctionnalité avec Nodejs (+ express + cheerio) comme suit:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

append -> inclut le contenu dans la div

replace -> remplace la div

vous pouvez facilement ajouter plus de comportements suivant le même design

1
giroxiii

HTTPieces est fait pour ça!

Je pensais que je laisserais tomber ça ici. Je voulais depuis longtemps intégrer des fonctionnalités sans tout le surcoût TCP/HTTP aller-retour. J'ai donc écrit un serveur qui le fera bien. Ce n’est pas prêt pour la production à grande échelle - c’est pour le développement et ce serait cool que d’autres personnes contribuent au projet!

GitHub

https://github.com/justincjack/httpieces

Vous pouvez développer votre site Web/votre application Web de manière modulaire et le tester en exécutant ce serveur écrit en PHP sur un ordinateur * nix. La prochaine fonctionnalité à venir sera la fonctionnalité de ligne de commande dans laquelle HTTPieces produira une archive compilée de votre projet à extraire dans le répertoire de contenu de votre serveur Web de production. Mais vérifiez si quelqu'un a le temps ou l'intérêt! Il a été conçu pour faire cela rapidement et efficacement.

0
Justin Jack

Pour que Solution fonctionne, vous devez inclure le fichier csi.min.js, que vous pouvez localiser ici .

Selon l'exemple présenté sur GitHub, pour utiliser cette bibliothèque, vous devez inclure le fichier csi.js dans votre en-tête de page, puis vous devez ajouter l'attribut data-include avec sa valeur définie dans le fichier à inclure, dans le conteneur. élément.

Masquer le code de copie

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... J'espère que ça aide.

0
Hamza Ali

Utilisation de ES6 backticks ``: template literals

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

` 
<div id="more"></div>

De cette façon, nous pouvons inclure du code HTML sans les guillemets d'encodage, inclure des variables du DOM, etc.

C'est un puissant moteur de templates, nous pouvons utiliser des fichiers js séparés et des événements pour charger le contenu à la place, ou même tout séparer en morceaux et appeler à la demande:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

0
Cryptopat

Voici mon approche utilisant l'API Fetch et la fonction async

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>
0
barro32

Si vous utilisez un framework tel que Django/bootle, ils envoient souvent un moteur de modèle . Supposons que vous utilisez bottle et que le moteur de modèle par défaut est SimpleTemplate Engine . Et ci-dessous se trouve le fichier html pur

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Vous pouvez inclure le footer.tpl dans votre fichier principal, comme ceci: 

$ cat dashboard.tpl
%include footer

En plus de cela, vous pouvez aussi passer un paramètre à votre dashborard.tpl.

0
jaseywang

Une autre approche utilisant Fetch API avec Promise

<html>
 <body>
  <div class="root" data-content="partial.html">
  <script>
      const root = document.querySelector('.root')
      const link = root.dataset.content;

      fetch(link)
        .then(function (response) {
          return response.text();
        })
        .then(function (html) {
          root.innerHTML = html;
        });
  </script>
 </body>
</html>
0
pinei

PHP est un langage de script au niveau du serveur. Il peut faire beaucoup de choses, mais l’une des utilisations courantes est d’inclure des documents HTML dans vos pages, de la même manière que SSI. Comme SSI, il s’agit d’une technologie de niveau serveur. Si vous n'êtes pas sûr d'avoir la fonctionnalité PHP sur votre site Web, contactez votre fournisseur d'hébergement.

Voici un simple script PHP que vous pouvez utiliser pour inclure un extrait de code HTML sur une page Web compatible PHP:

Enregistrez le code HTML des éléments communs de votre site pour séparer les fichiers. Par exemple, votre section de navigation peut être enregistrée sous le nom navigation.html ou navigation.php . Utilisez le code PHP suivant pour inclure ce code HTML dans chaque page.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Utilisez le même code sur chaque page où vous souhaitez inclure le fichier . Assurez-vous de changer le nom du fichier en surbrillance en le nom et le chemin d'accès à votre fichier d'inclusion.

0
Udara Pathirage

Je suis venu sur ce sujet à la recherche de quelque chose de similaire, mais un peu différent du problème posé par lolo. Je voulais construire une page HTML contenant un menu alphabétique de liens vers d'autres pages. Chacune des autres pages pouvait ou non exister, et l'ordre dans lequel elles avaient été créées pouvait ne pas être alphabétique (ni même numérique). En outre, comme Tafkadasoh, je ne voulais pas gonfler la page Web avec jQuery. Après avoir recherché le problème et expérimenté pendant plusieurs heures, voici ce qui a fonctionné pour moi, avec des remarques pertinentes ajoutées:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>
0
vernonner3voltazim

Toutes les solutions ci-dessus ne disposent pas d'un raccordement d'événement pour permettre à JS de cibler le code HTML nouvellement inclus. Beaucoup n'avaient pas non plus une bonne compatibilité de navigateur.

J'ai donc créé une bibliothèque pour tous ceux qui pourraient avoir besoin de ces 2 avantages par rapport à un simple script d'inclusion HTML.

Voici la bibliothèque JS: include.js

0
Hybrid