Ich habe 2 HTML-Dateien, nehmen wir an a.html y b.html . Unter a.html Ich möchte Folgendes aufnehmen b.html .
In JSF kann ich das auch so machen:
<ui:include src="b.xhtml" />Das bedeutet, dass im Inneren a.xhtml Datei, kann ich Folgendes einfügen b.xhtml .
Wie können wir das tun in *.html Datei?
Ich bin zu diesem Thema gekommen, weil ich etwas Ähnliches, aber etwas anderes als das von lolo gestellte Problem gesucht habe. Ich wollte eine HTML-Seite erstellen, die ein alphabetisches Menü mit Links zu anderen Seiten enthält, und jede der anderen Seiten könnte existieren oder nicht, und die Reihenfolge, in der sie erstellt wurden, könnte nicht alphabetisch (oder sogar numerisch) sein. Außerdem wollte ich, wie Tafkadasoh, die Webseite nicht mit jQuery aufblähen. Nachdem ich das Problem untersucht und mehrere Stunden lang experimentiert hatte, habe ich die folgende Lösung gefunden, die ich mit entsprechenden Anmerkungen versehen habe:
<!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 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>
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>
Ich empfehle dringend AngularJS's ng-include ob Ihr Projekt AngularJS ist oder nicht.
<script src=".../angular.min.js"></script>
<body ng-app="ngApp" ng-controller="ngCtrl">
<div ng-include="'another.html'"></div>
<script>
var app = angular.module('ngApp', []);
app.controller('ngCtrl', function() {});
</script>
</body>Sie können CDN finden (oder Zip herunterladen) unter AngularJS und weitere Informationen unter W3Schulen .
PHP ist eine Skriptsprache auf Serverebene. Sie kann viele Dinge tun, aber eine beliebte Anwendung ist die Einbindung von HTML-Dokumenten in Ihre Seiten, ähnlich wie SSI. Wie SSI ist auch dies eine Technologie auf Serverebene. Wenn Sie sich nicht sicher sind, ob Ihre Website über PHP-Funktionen verfügt, wenden Sie sich an Ihren Hosting-Anbieter.
Hier ist ein einfaches PHP-Skript, mit dem Sie einen HTML-Schnipsel in jede PHP-fähige Webseite einfügen können:
Speichern Sie das HTML für die gemeinsamen Elemente Ihrer Website in separaten Dateien. Zum Beispiel könnte Ihr Navigationsbereich als navigation.html oder navigation.php gespeichert werden. Verwenden Sie den folgenden PHP-Code, um diesen HTML-Code in jede Seite einzubinden.
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>Verwenden Sie denselben Code auf jeder Seite, auf der Sie die Datei einbinden möchten. Stellen Sie sicher, dass Sie den hervorgehobenen Dateinamen in den Namen und den Pfad Ihrer Include-Datei ändern.
Wenn Sie ein Framework wie django/bootle verwenden, liefern sie oft eine Template-Engine mit. Nehmen wir an, Sie verwenden Bottle, und die Standard-Vorlagen-Engine ist SimpleTemplate-Engine . Und unten ist die reine html-Datei
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>Sie können die footer.tpl in Ihre Hauptdatei einbinden, etwa so:
$ cat dashboard.tpl
%include footerAußerdem können Sie auch Parameter an Ihre dashborard.tpl übergeben.
Wenn Sie nur Text aus einer separaten Datei in Ihre Seite einfügen wollen (Tags im Text sollten auch funktionieren), können Sie Folgendes tun (Ihre Textstile auf der Hauptseite- test.html -sollte noch funktionieren):
test.html
<html>
<body>
<p>Start</p>
<p>Beginning</p>
<div>
<script language="JavaScript" src="sample.js"></script>
</div>
<p>End</p>
</body>
</html>sample.js
var data="Here is the imported text!";
document.write(data);Sie können die gewünschten HTML-Tags ja jederzeit selbst neu erstellen. Es gibt keinen Grund für serverseitiges Scripting, nur um Text aus einer anderen Datei zu holen, es sei denn, Sie wollen etwas mehr tun.
Jedenfalls möchte ich damit erreichen, dass ich, wenn ich eine Beschreibung aktualisiere, die in vielen HTML-Dateien vorkommt, nur eine Datei aktualisieren muss (die .js Datei) und nicht jede einzelne HTML-Datei, die den Text enthält.
Zusammenfassend lässt sich also sagen, dass anstelle des Imports einer .html Datei, eine einfachere Lösung ist der Import einer .js Datei mit dem Inhalt der Datei .html Datei in eine Variable (und schreiben Sie den Inhalt auf den Bildschirm, wenn Sie das Skript aufrufen).
Vielen Dank für die Frage.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
