it-swarm.com.de

Fügen Sie eine weitere HTML-Datei in eine HTML-Datei ein

Ich habe 2 HTML-Dateien, angenommen a.html und b.html. In a.html möchte ich b.html einschließen.

In JSF kann ich das so machen:

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

Das bedeutet, dass ich in a.xhtml-Datei b.xhtml einfügen kann.

Wie können wir das in *.html-Datei machen?

530
lolo

Meiner Meinung nach verwendet die beste Lösung 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>

Diese Methode ist eine einfache und saubere Lösung für mein Problem.

Die jQuery .load() Dokumentation ist hier .

604
lolo

Meine Lösung ähnelt der von lolo darüber. Ich füge den HTML-Code jedoch über JavaScript.write ein, anstatt jQuery zu verwenden:

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>\
\
');

Der Grund für mich gegen die Verwendung von jQuery ist, dass jQuery.js ~ 90kb groß ist und ich möchte, dass die zu ladende Datenmenge so klein wie möglich ist.

Um die korrekt maskierte JavaScript-Datei ohne viel Arbeit zu erhalten, können Sie den folgenden sed-Befehl verwenden:

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

Oder verwenden Sie einfach das folgende praktische Bash-Skript, das als Gist auf Github veröffentlicht wurde. Es automatisiert alle erforderlichen Arbeiten und konvertiert b.html in b.js: https://Gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Dank an Greg Minshall für den verbesserten sed-Befehl, der auch Schrägstriche und einfache Anführungszeichen entgeht, die mein ursprünglicher sed-Befehl nicht berücksichtigt hat.

131
Tafkadasoh

Um die Antwort von Lolo von oben zu erweitern, ist hier etwas mehr Automatisierung, wenn Sie viele Dateien einfügen müssen:

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

Und dann etwas in die HTML einzuschließen:

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

Dazu gehören die Dateien views/header.html und views/footer.html

114
mhanisch

Checkout HTML5-Importe über Html5rocks-Tutorial Und at polymer-project

Zum Beispiel:

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

Schamloser Plug einer Bibliothek, die ich geschrieben habe, löse dies.

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

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

Das obige wird den Inhalt von /path/to/include.html übernehmen und die div damit ersetzen.

57
Michael Marr

Eine einfache serverseitige Include-Anweisung zum Einschließen einer anderen Datei in demselben Ordner sieht folgendermaßen aus:

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

Eine sehr alte Lösung Ich habe meine Bedürfnisse damals erfüllt, aber wie man es mit standardkonformem Code macht:

<!--[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

Keine Notwendigkeit für Skripte. Keine Notwendigkeit, irgendwelche schicken Sachen serverseitig zu tun (das wäre wahrscheinlich die bessere Option)

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

Da alte Browser Seamless nicht unterstützen, sollten Sie einige CSS hinzufügen, um das Problem zu beheben:

iframe[seamless] {
    border: none;
}

Beachten Sie, dass bei Browsern, die nicht nahtlos unterstützen, der frame durch Klicken auf einen Link im iframe zu dieser URL und nicht zum gesamten Fenster geleitet wird. Eine Möglichkeit, sich zu bewegen, besteht darin, alle Links target="_parent" zu haben, damit der Browser "gut genug" ist.

28
bjb568

Wenn Sie Zugriff auf die .htaccess-Datei auf Ihrem Server haben, können Sie alternativ eine einfache Anweisung hinzufügen, mit der php für Dateien mit der Erweiterung .html interpretiert werden kann.

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

Jetzt können Sie ein einfaches PHP-Skript verwenden, um andere Dateien einzuschließen, z.

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

Die folgenden Anweisungen funktionieren, wenn HTML-Inhalt aus einer Datei enthalten sein muss: Die folgende Zeile enthält beispielsweise den Inhalt von piece_to_include.html an der Stelle, an der die OBJECT-Definition vorkommt.

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

Referenz: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

12
CoolDude

Das hat mir geholfen. Um einen HTML-Code-Block von b.html zu a.html hinzuzufügen, sollte dies in den Tag head von a.html gehen:

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

Im body-Tag wird dann ein Container mit einer eindeutigen ID und einem Javascript-Block erstellt, um den b.html wie folgt in den Container zu laden:

<div id="b-placeholder">

</div>

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

Sie können eine Vielzahl von HTML-Importen ( https://www.html5rocks.com/de/tutorials/webcomponents/imports/ ) oder diese vereinfachte Lösung verwenden https://github.com/ dsheiko/html-import

Auf der Seite importieren Sie beispielsweise einen HTML-Block wie folgt:

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

Der Block kann eigene Importe haben:

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

Der Importer ersetzt die Direktive durch den geladenen HTML-Code, ähnlich wie SSI

Diese Anweisungen werden automatisch angezeigt, sobald Sie dieses kleine JavaScript laden:

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

Die Importe werden automatisch verarbeitet, wenn DOM bereit ist. Außerdem wird eine API bereitgestellt, mit der Sie manuell ausführen, Protokolle abrufen können. Genießen :)

7
Dmitry Sheiko

Ich weiß, dass dies ein sehr alter Beitrag ist, daher waren einige Methoden damals nicht verfügbar ... Aber hier ist meine sehr einfache Einstellung (basierend auf Lolos Antwort).

Es basiert auf den HTML5-data- * -Attributen und ist daher sehr allgemein gehalten, da es die for-each-Funktion von jQuery verwendet, um jede .class, die mit "load-html" übereinstimmt, zu erhalten.

<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

In w3.js sind folgende Werke enthalten:

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

So fügen Sie den Inhalt der genannten Datei ein:

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

Die Antwort des Athari (die erste!) War zu schlüssig! Sehr gut!

Wenn Sie jedoch den Namen der Seite übergeben möchten, die als URL-Parameter eingefügt werden soll, bietet dieser Beitrag eine sehr schöne Lösung zur Verwendung mit:

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

So wird es ungefähr so:

Ihre URL: 

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

Der a.html -Code wird jetzt zu:

<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>

Es hat sehr gut für mich funktioniert. Ich hoffe, es hat geholfen :)

5
Massa

Die meisten Lösungen funktionieren, aber sie haben Probleme mit jquery:

Das Problem ist folgender Code: $(document).ready(function () { alert($("#includedContent").text()); } warnt nichts, anstatt den enthaltenen Inhalt zu warnen.

Ich schreibe den folgenden Code, in meiner Lösung können Sie auf den in $(document).ready enthaltenen Inhalt zugreifen:

(Der Schlüssel lädt den enthaltenen Inhalt synchron.).

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 auf Github

5
Amir Saniyan

html5rocks.com hat ein sehr gutes Tutorial zu diesem Zeug, und dies könnte ein wenig spät sein, aber ich selbst wusste nicht, dass dies existierte. w3schools hat auch eine Möglichkeit, dies mithilfe ihrer neuen Bibliothek namens w3.js zu tun. Die Sache ist, das erfordert die Verwendung eines Webservers und eines HTTPRequest-Objekts. Sie können diese nicht lokal laden und auf Ihrem Computer testen. Was Sie jedoch tun können, ist die Verwendung von Polyfills im html5rocks-Link oben oder folgen Sie der Anleitung. Mit etwas JS-Zauber können Sie Folgendes tun:

 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);
 }

Dadurch wird der Link erstellt (Kann als gewünschtes Link-Element geändert werden, wenn bereits festgelegt), den Import festgelegt (sofern Sie ihn nicht bereits haben) und ihn dann anhängen. Es wird dann von dort das übernehmen und die Datei in HTML analysieren und dann an das gewünschte Element unter einem div anhängen. Dies kann alles geändert werden, um Ihren Anforderungen zu entsprechen, vom anhängenden Element bis zu dem von Ihnen verwendeten Link. Ich hoffe, das hat geholfen, es kann jetzt irrelevant sein, wenn neuere, schnellere Wege herauskommen, ohne Bibliotheken und Frameworks wie jQuery oder W3.js zu verwenden.

UPDATE: Dies gibt einen Fehler aus, der besagt, dass der lokale Import durch die CORS-Richtlinie blockiert wurde. Möglicherweise benötigen Sie Zugriff auf das Deep Web, um dies aufgrund der Eigenschaften des Deep Web nutzen zu können. (Bedeutet keine praktische Verwendung)

4
SubLock69

Sie können dies mit der JavaScript-Bibliothek jQuery wie folgt tun:

HTML:

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

JS:

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

Beachten Sie, dass sich banner.html unter derselben Domäne befinden sollte, auf der sich Ihre anderen Seiten befinden. Andernfalls lehnen Ihre Webseiten die banner.html-Datei aufgrund von Cross-Origin Resource Sharing Policies ab.

Beachten Sie außerdem, dass Google beim Indizieren von Inhalten mit JavaScript nicht in der Lage ist, den Inhalt zu indexieren, sodass dies aus SEO-Gründen nicht unbedingt eine gute Methode ist.

3
AndrewL64

Derzeit gibt es keine direkte HTML-Lösung für die Aufgabe. Sogar HTML Imports (was dauerhaft in draft ist) werden das nicht machen, weil Import! = Include und etwas JS-Magie ohnehin erforderlich sind.
Ich habe kürzlich ein VanillaJS - Skript geschrieben , das nur zur Aufnahme von HTML in HTML ohne Komplikationen dient. 

Platziere einfach in deinem a.html

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

Es ist open-source und kann eine Idee geben (hoffe ich)

3
al.scvorets

Hier ist ein großartiger Artikel , Sie können eine allgemeine Bibliothek implementieren und einfach den folgenden Code verwenden, um HTML-Dateien in einer Zeile zu importieren. 

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

Sie können auch versuchen, Google Polymer

2
Dhiral Pandya

Basierend auf der Antwort von https://stackoverflow.com/a/31837264/4360308 .__ habe ich diese Funktionalität mit Nodejs (+ express + cheerio) wie folgt implementiert:

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 -> fügt den Inhalt in das div ein

ersetzen -> ersetzt das div

sie können leicht weitere Verhaltensweisen hinzufügen, die demselben Design folgen

1
giroxiii

HTTPieces ist dafür!

Ich dachte nur, ich würde das hier fallen lassen. Ich wollte schon lange ein paar Funktionen ohne all den TCP/HTTP-Overhead. Also habe ich einen Server geschrieben, der das gut macht. Es ist nicht bereit für die Produktion im großen Maßstab - es ist für die Entwicklung und es wäre cool, wenn andere Leute an dem Projekt mitwirken würden!

GitHub

https://github.com/justincjack/httpieces

Sie können Ihre Website/Web-App modular entwickeln und testen, wenn Sie diesen Server in PHP auf einer * nix-Maschine ausführen. Die nächste Funktion ist die Befehlszeilenfunktionalität, bei der HTTPieces ein kompiliertes Archiv Ihres Projekts erstellt, das im Inhaltsverzeichnis Ihres Produktions-Webservers extrahiert wird. Aber prüfen Sie, ob jemand Zeit oder Interesse hat! Es wurde gemacht, um dies so schnell und effizient zu tun.

0
Justin Jack

Um Solution zum Laufen zu bringen, müssen Sie die Datei csi.min.js einfügen, die Sie finden können hier .

Um diese Bibliothek zu verwenden, müssen Sie gemäß dem in GitHub gezeigten Beispiel die Datei csi.js in Ihren Seitenkopf einfügen. Anschließend müssen Sie das Attribut data-include mit seinem festgelegten Wert zu der Datei hinzufügen, die Sie in den Container aufnehmen möchten Element.

Kopiercode ausblenden

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

... ich hoffe es hilft.

0
Hamza Ali

Verwenden von 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>

Auf diese Weise können wir HTML ohne Kodierungsanführungszeichen, Variablen aus dem DOM usw. einschließen.

Es ist eine leistungsstarke Templating Engine. Wir können separate js-Dateien und Ereignisse verwenden, um den Inhalt an Ort und Stelle zu laden, oder sogar alles in Chunks trennen und bei Bedarf aufrufen:

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

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

0
Cryptopat

Hier ist mein Ansatz mit Fetch API und Async-Funktion

<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

Wenn Sie ein Framework wie Django/bootle verwenden, wird oft eine Template Engine ausgeliefert ..__ Nehmen wir an, Sie verwenden bottle und die Standard Template Engine ist SimpleTemplate Engine ..__

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

Sie können die footer.tpl in Ihre Hauptdatei einfügen, wie zum Beispiel: 

$ cat dashboard.tpl
%include footer

Außerdem können Sie Parameter an Ihre dashborard.tpl übergeben.

0
jaseywang

Ein weiterer Ansatz mit Fetch API with 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 ist eine Skriptsprache auf Serverebene. Es kann viele Dinge tun, aber eine beliebte Verwendung besteht darin, HTML-Dokumente in Ihre Seiten einzufügen, ähnlich wie SSI. Wie SSI ist dies eine Technologie auf Serverebene. Wenn Sie nicht sicher sind, ob Sie auf Ihrer Website über die Funktion PHP verfügen, wenden Sie sich an Ihren Hosting-Provider.

Hier ist ein einfaches PHP Skript, mit dem Sie ein HTML-Snippet auf einer PHP-fähigen Webseite einfügen können:

Speichern Sie den HTML-Code für die gemeinsamen Elemente Ihrer Website, um die Dateien voneinander zu trennen. Beispielsweise könnte Ihr Navigationsabschnitt als navigation.html oder navigation.php ..__ gespeichert werden. Verwenden Sie den folgenden Code PHP, um diesen HTML-Code in jede Seite einzufügen.

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

Verwenden Sie auf jeder Seite, auf der Sie die Datei einfügen möchten, den gleichen Code. Stellen Sie sicher, dass der Name der hervorgehobenen Datei in Name und Pfad der Include-Datei geändert wird.

0
Udara Pathirage

Ich kam zu diesem Thema auf der Suche nach etwas ähnlichem, aber ein bisschen anders als das Problem, das Lolo stellte. Ich wollte eine HTML-Seite erstellen, die ein alphabetisches Menü mit Links zu anderen Seiten enthält, und jede der anderen Seiten könnte vorhanden sein oder nicht, und die Reihenfolge, in der sie erstellt wurden, ist möglicherweise nicht alphabetisch (noch nicht einmal numerisch). Ebenso wie Tafkadasoh wollte ich die Webseite nicht mit jQuery aufblähen. Nachdem ich das Problem recherchiert und mehrere Stunden lang experimentiert hatte, funktionierte es für mich und fügte relevante Anmerkungen hinzu:

<!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

Alle oben genannten Lösungen verfügen nicht über einen Ereignis-Hook, mit dem JS auf das neu hinzugefügte HTML zugreifen kann. Viele hatten auch keine gute Browserkompatibilität.

Daher habe ich eine Bibliothek für alle erstellt, die diese beiden Vorteile gegenüber einem einfachen HTML-Include-Skript benötigen.

Hier ist die JS-Bibliothek: includeseme.js

0
Hybrid