Dołącz inny plik HTML do pliku HTML

Mam 2 pliki HTML, Załóżmy a.html i b.html. W {[1] } chcę włączyć b.html.

W JSF mogę to zrobić tak:

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

Oznacza to, że wewnątrz a.xhtml pliku mogę umieścić b.xhtml.

Jak możemy to zrobić w *.html pliku?

 506
Author: BalusC, 2012-01-24

28 answers

Moim zdaniem najlepszym rozwiązaniem jest użycie 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>
Ta metoda jest prostym i czystym rozwiązaniem mojego problemu.

Dokumentacja jQuery .load() jest tutaj.

 580
Author: lolo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-04 11:03:19

Moje rozwiązanie jest podobne do tego z lolo powyżej. Jednak wstawiam kod HTML za pomocą dokumentu JavaScript.napisz zamiast używać 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>\
\
');

Powodem, dla którego nie używam jQuery jest to, że jQuery.js ma rozmiar ~90kb i chcę, aby ilość danych ładowała się jak najmniej.

Aby uzyskać poprawnie zabezpieczony plik JavaScript bez większego wysiłku, możesz użyć następującego sed polecenie:

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

Lub po prostu użyj następującego poręcznego skryptu bash opublikowanego jako Gist na Github, który automatyzuje całą niezbędną pracę, konwertując b.html na b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Podziękowania dla Greg Minshall za ulepszoną komendę sed, która również ucieka przed ukośnikami i pojedynczymi cudzysłowami, których oryginalna Komenda sed nie brała pod uwagę.

 124
Author: Tafkadasoh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-15 06:36:32

Rozszerzając odpowiedź lolo z góry, tutaj jest trochę więcej automatyzacji, jeśli musisz dołączyć dużo plików:

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

A następnie umieścić coś w html:

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

Który zawiera widoki / nagłówek pliku.html i widoki / stopka.html

 100
Author: mhanisch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-10 20:56:58

Checkout import HTML5 poprzez html5rocks tutorial oraz na polimer-projekt

Na przykład:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
 71
Author: user1587439,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-22 15:44:54

Bezwstydna wtyczka biblioteki, którą napisałem Rozwiąż to.

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

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

Powyższe zajmie zawartość /path/to/include.html i zastąpi nią div.

 51
Author: Michael Marr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-13 16:51:27

Prosta po stronie serwera dyrektywa include, aby dołączyć inny plik znaleziony w tym samym folderze wygląda tak:

<!--#include virtual="a.html" --> 
 43
Author: Webdesign7 London,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-14 14:27:03

A bardzo stare rozwiązanie spełniłem wtedy moje potrzeby, ale oto jak to zrobić:

<!--[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
Author: Aleksandar Vacić,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-24 23:25:51

Nie potrzeba skryptów. Nie musisz robić żadnych fantazyjnych rzeczy po stronie serwera (tho, które prawdopodobnie byłoby lepszą opcją)

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

Ponieważ stare przeglądarki nie obsługują seamless, powinieneś dodać trochę css, aby to naprawić:

iframe[seamless] {
    border: none;
}

Należy pamiętać, że w przypadku przeglądarek, które nie obsługują seamless, kliknięcie linku w ramce iframe spowoduje, że ramka trafi do tego adresu url, a nie do całego okna. Sposób na obejście, który polega na tym, aby wszystkie linki miały target="_parent", ponieważ obsługa przeglądarki jest " dobra wystarczy".

 28
Author: bjb568,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-27 00:52:02

Jako alternatywę, jeśli masz dostęp do.plik htaccess na twoim serwerze możesz dodać prostą dyrektywę, która pozwoli na interpretację php na plikach kończących się na .rozszerzenie html.

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

Teraz możesz użyć prostego skryptu php do dołączania innych plików, takich jak:

<?php include('b.html'); ?>
 15
Author: rtd1123,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-24 15:04:53

Następujące działania, jeśli zawartość html z jakiegoś pliku musi być dołączona: Na przykład, następująca linia będzie zawierać zawartość piece_to_include.html w miejscu, w którym występuje definicja obiektu.

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

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

 11
Author: CoolDude,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-20 07:11:27

To mi pomogło. Aby dodać blok kodu html z b.html do a.html, należy przejść do znacznika head z a.html:

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

Następnie w znaczniku body tworzy się kontener z unikalnym identyfikatorem i blokiem javascript, aby załadować b.html do kontenera, w następujący sposób:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>
 8
Author: Ramtin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-19 22:11:21

Aby wstawić zawartość nazwanego pliku:

<!--#include virtual="filename.htm"-->
 6
Author: St.Eve,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-18 05:56:44

Możesz użyć polyfill importów HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports / ), lub to uproszczone rozwiązanie https://github.com/dsheiko/html-import

Na przykład na stronie importujesz blok HTML w ten sposób:

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

Blok może mieć własny import:

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

Importer zastępuje dyrektywę załadowanym kodem HTML, podobnie jak SSI

Te dyrektywy będą serwowane automatycznie po załadowaniu ten mały JavaScript:

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

Przetworzy import, gdy DOM będzie gotowy automatycznie. Poza tym wyświetla API, które można użyć do uruchomienia ręcznie, aby uzyskać dzienniki i tak dalej. Enjoy :)

 6
Author: Dmitry Sheiko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-03 12:23:13

Odpowiedź Atharisa (pierwsza!) było zbyt rozstrzygające! Bardzo Dobrze!

Ale jeśli chcesz przekazać nazwę strony jako parametr URL, Ten post ma bardzo ładne rozwiązanie do wykorzystania w połączeniu z:

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

Więc staje się coś takiego:

Twój URL:

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

The a.html Kod teraz staje się:

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

To działało bardzo dobrze dla mnie! Mam nadzieję, że pomogłem:)

 5
Author: Massa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-19 17:15:18

Większość rozwiązań działa, ale mają problem z jquery :

Problem polega na tym, że kod $(document).ready(function () { alert($("#includedContent").text()); } nie ostrzega niczego, zamiast alarmować zawartą zawartość.

Piszę poniższy kod, w moim rozwiązaniu można uzyskać dostęp do dołączonej treści w funkcji $(document).ready:

(klawisz ładuje zawartość synchronicznie).

Indeks.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
Author: Amir Saniyan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-13 19:43:19

W w3.js zawiera utwory takie jak:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
 5
Author: Kaj Risberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-12 09:32:40

Html5rocks.com ma bardzo dobry tutorial na ten temat, i to może być trochę późno, ale sam nie wiedziałem, że istnieje. w3schools ma również sposób, aby to zrobić, używając swojej nowej biblioteki o nazwie W3.js. Chodzi o to, że wymaga to użycia serwera WWW i obiektu HTTPRequest. Nie można ich załadować lokalnie i przetestować na komputerze. To, co możesz zrobić, to użyć polyfills dostarczonego w linku html5rocks u góry lub postępuj zgodnie z ich samouczkiem. Z odrobiną JS Magia, można zrobić coś takiego:

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

Spowoduje to utworzenie łącza (może zmienić się na żądany element łącza, jeśli już jest ustawiony), ustawienie importu (chyba że już go masz), a następnie dodanie go. Następnie weźmie to i przetworzy plik w HTML, a następnie doda go do żądanego elementu pod div. Wszystko to można zmienić w zależności od potrzeb, od elementu dołączającego do łącza, którego używasz. Mam nadzieję, że to pomogło, może teraz nie ma znaczenia, jeśli pojawiły się nowsze, szybsze sposoby bez używania bibliotek i frameworków takich jak jQuery czy w3.js.

UPDATE: spowoduje to wyświetlenie błędu informującego, że import lokalny został zablokowany przez politykę CORS. Może wymagać dostępu do głębokiej sieci, aby móc tego używać ze względu na właściwości głębokiej sieci. (Czyli brak praktycznego zastosowania)

 4
Author: SubLock69,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-17 02:57:21

Wiem, że to bardzo stary post, więc niektóre metody nie były wtedy dostępne. Ale oto moje bardzo proste podejście do tego (na podstawie odpowiedzi Lolo).

Opiera się na atrybutach HTML5 data - * i dlatego jest bardzo ogólny, ponieważ używa funkcji jQuery for-each, aby uzyskać każdy.Klasa pasująca do "load-html" i używa odpowiedniego atrybutu "data-source"do załadowania zawartości:

<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>
 4
Author: Ben Mc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-27 01:38:52

Nie ma na razie bezpośredniego rozwiązania HTML dla tego zadania. Nawet Import HTML (który jest trwale w drafcie ) nie zrobi tego, ponieważ Import != Include i niektóre js magic będą wymagane i tak.
Niedawno napisałem skrypt VanillaJS , który służy tylko do włączenia HTML do HTML, bez żadnych komplikacji.

Po prostu umieść w swoim a.html

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

Jest open-source i może dać pomysł (mam nadzieję)

 3
Author: al.scvorets,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-01 14:56:31

Możesz to zrobić z biblioteką JavaScript jQuery w następujący sposób:

HTML:

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

JS:

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

Należy pamiętać, że banner.html powinny znajdować się w tej samej domenie, w której znajdują się Twoje inne strony, w przeciwnym razie twoje strony odrzucą plik banner.html z powodu Udostępnianie zasobów między źródłami Polityka.

Należy również pamiętać, że jeśli ładujesz swoje treści za pomocą JavaScript, Google nie będzie w stanie je indeksować, więc nie jest to do końca dobra metoda SEO powody.

 3
Author: AndrewL,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-19 23:13:37

Oto świetny artykuł, możesz zaimplementować wspólną bibliotekę i po prostu użyć poniższego kodu, aby zaimportować dowolne pliki HTML w jednej linii.

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

Możesz też spróbować Google Polimer

 2
Author: Dhiral Pandya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-17 17:56:08

Na podstawie odpowiedzi https://stackoverflow.com/a/31837264/4360308 Zaimplementowałem tę funkcjonalność z Nodejs (+express + cheerio) w następujący sposób:

HTML (indeks.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 -> zawiera zawartość do div

Replace - > zastępuje div

Możesz łatwo dodać więcej zachowań według tego samego projektu

 1
Author: giroxiii,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:26

Doszedłem do tego tematu szukając czegoś podobnego, ale nieco innego od problemu, jaki stawiał lolo. Chciałem skonstruować stronę HTML z alfabetycznym menu linków do innych stron, a każda z innych stron może lub nie może istnieć, a kolejność, w jakiej zostały utworzone, może nie być alfabetyczna (ani nawet numeryczna). Ponadto, podobnie jak Tafkadasoh, nie chciałem nadmuchać strony z jQuery. Po zbadaniu problemu i eksperymentowaniu przez kilka godzin, oto co u mnie działa, z odpowiednimi uwagami dodanymi:

<!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
Author: vernonner3voltazim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-09 16:39:00

Jeśli używasz jakiegoś frameworka, takiego jak django / bootle, często wysyłają jakiś silnik szablonów. Załóżmy, że używasz bottle, a domyślnym silnikiem szablonu jest SimpleTemplate Engine . Poniżej znajduje się czysty plik html

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

Możesz dołączyć stopkę.tpl w pliku głównym, jak:

$ cat dashboard.tpl
%include footer

Poza tym możesz również przekazać parametr do swojego dashborarda.tpl.

 0
Author: jaseywang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-18 07:43:52

PHP jest językiem skryptowym na poziomie serwera. Może robić wiele rzeczy, ale jednym z popularnych zastosowań jest dołączanie dokumentów HTML do stron, tak samo jak SSI. Podobnie jak SSI, jest to technologia na poziomie serwera. Jeśli nie masz pewności, czy masz funkcjonalność PHP w swojej witrynie, skontaktuj się z dostawcą usług hostingowych.

Oto prosty skrypt PHP, którego możesz użyć do umieszczenia fragmentu HTML na dowolnej stronie obsługującej PHP:

Zapisz HTML dla wspólnych elementów Witryny do oddzielnych plików. Na na przykład Twoja sekcja nawigacji może zostać zapisana jako nawigacja.html lub nawigacja.php. Użyj następującego kodu PHP, aby umieścić ten kod HTML na każdej stronie.

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

Użyj tego samego kodu na każdej stronie, na której chcesz dołączyć plik. Upewnij się, że zmienisz podświetloną nazwę pliku na nazwę i ścieżkę do pliku dołączonego.

 -1
Author: Udara Pathirage,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-26 13:04:46

Cóż, jeśli wszystko, co chcesz zrobić, to umieścić tekst z oddzielnego pliku na swojej stronie (znaczniki w tekście również powinny działać), możesz to zrobić (twoje style tekstu na stronie głównej-test.html-nadal powinny działać):

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

W końcu zawsze możesz odtworzyć tagi HTML, które chcesz. Istnieje potrzeba skryptów po stronie serwera, aby pobrać tekst z innego pliku, chyba że chcesz zrobić coś więcej.

W każdym razie, co zaczynam używać tego for ma sprawić, że jeśli zaktualizuję opis powszechny wśród wielu plików HTML, muszę tylko zaktualizować jeden plik, aby to zrobić (Plik .js) zamiast każdego pojedynczego pliku HTML, który zawiera tekst.

Podsumowując, zamiast importować plik .html, prostszym rozwiązaniem jest zaimportowanie pliku .js z zawartością pliku .html W Zmiennej (i zapisanie zawartości na ekranie, na którym wywołujesz skrypt).

Dzięki za pytanie.
 -1
Author: Shule,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-28 01:39:22

Proste rozwiązanie z php:

<?php
    readfile("yourpath/yourpage.html");
?>
 -4
Author: Ansjovis86,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-14 14:23:10

Używanie jquery wymaga biblioteki importu

Polecam korzystanie z php

<?php
    echo"<html>   
          <body>";
?> 
<?php
    include "b.html";
?>
<?php
    echo" </body> 
        </html>";
?>

B.html

<div>hi this is ur file :3<div>
 -6
Author: Bear Bear,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-06 19:18:53