inyectar - Incluir otro archivo HTML en un archivo HTML
javascript load html file (27)
Tengo 2 archivos HTML, supongo que a.html y b.html . En a.html quiero incluir b.html .
En JSF puedo hacerlo así:
<ui:include src="b.xhtml" />
Significa que dentro de a.xhtml archivo.xhtml, puedo incluir b.xhtml .
¿Cómo podemos hacerlo en el archivo *.html ?
¡La respuesta de Athari (la primera!) Fue demasiado concluyente! ¡Muy bien!
Pero si desea pasar el nombre de la página que se incluirá como parámetro de URL , esta publicación tiene una solución muy buena para usar combinada con:
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
Entonces se convierte en algo como esto:
Tu URL:
www.yoursite.com/a.html?p=b.html
El código a.html ahora se convierte en:
<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>
¡Funcionó muy bien para mí! Espero haberte ayudado :)
Ampliando la respuesta de lolo desde arriba, aquí hay un poco más de automatización si tiene que incluir muchos archivos:
<script>
$(function(){
var includes = $(''[data-include]'');
jQuery.each(includes, function(){
var file = ''views/'' + $(this).data(''include'') + ''.html'';
$(this).load(file);
});
});
</script>
Y luego incluir algo en el html:
<div data-include="header"></div>
<div data-include="footer"></div>
Que incluiría el archivo views / header.html y views / footer.html
Checkout HTML5 importa a través de Html5rocks tutorial y en polymer-project
Por ejemplo:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
Como alternativa, si tiene acceso al archivo .htaccess en su servidor, puede agregar una directiva simple que permita la interpretación de php en los archivos que terminan en la extensión .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Ahora puede usar un script php simple para incluir otros archivos como:
<?php include(''b.html''); ?>
El siguiente trabajo funciona si es necesario incluir el contenido html de algún archivo: por ejemplo, la siguiente línea incluirá el contenido de piece_to_include.html en la ubicación donde se produce la definición de OBJECT.
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
Referencia: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
En mi opinión, la mejor solución usa 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>
Este método es una solución simple y limpia para mi problema.
La documentación de jQuery .load() está here .
En w3.js incluyen trabajos como este:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
Enchufe descarado de una biblioteca que escribí para resolver esto.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
Lo anterior tomará el contenido de /path/to/include.html y reemplazará el div con él.
Esto es lo que me ayudó. Para agregar un bloque de código html de b.html a a.html , esto debe ir a la etiqueta de head de a.html :
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Luego, en la etiqueta del cuerpo, se b.html un contenedor con una ID única y un bloque javascript para cargar el b.html en el contenedor, de la siguiente manera:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
La mayoría de las soluciones funcionan pero tienen problemas con jQuery :
El problema es el siguiente código $(document).ready(function () { alert($("#includedContent").text()); } no alerta nada en lugar de alertar al contenido incluido.
Escribo el siguiente código, en mi solución puede acceder al contenido incluido en la función $(document).ready :
(La clave es cargar contenido incluido de forma síncrona).
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>
incluir.inc :
<div id="test">
There is no issue between this solution and jquery.
</div>
Llegué a este tema en busca de algo similar, pero un poco diferente del problema planteado por lolo. Quería construir una página HTML que contenga un menú alfabético de enlaces a otras páginas, y cada una de las otras páginas podría o no existir, y el orden en el que fueron creadas podría no ser alfabético (ni siquiera numérico). Además, como Tafkadasoh, no quería inflar la página web con jQuery. Después de investigar el problema y experimentar durante varias horas, esto es lo que me funcionó, con comentarios relevantes agregados:
<!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>
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>
Mi solución es similar a la de anterior. Sin embargo, inserto el código HTML a través de document.write de JavaScript en lugar de usar 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>/
/
'');
La razón por la que estoy en contra de usar jQuery es que jQuery.js tiene un tamaño de ~ 90kb, y deseo mantener la cantidad de datos para cargar lo más pequeña posible.
Para obtener el archivo JavaScript que se ha escapado correctamente sin mucho trabajo, puede usar el siguiente comando sed:
sed ''s/////////g;s/^.*$/&///g;s/''/'''///'/'''/g'' b.html > escapedB.html
O simplemente use el siguiente script bash práctico publicado como Gist en Github, que automatiza todo el trabajo necesario, convirtiendo b.html a b.js : https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Créditos a Greg Minshall por el comando sed mejorado que también escapa de barras y comillas simples, que mi comando sed original no tuvo en cuenta.
No hay necesidad de scripts. No hay necesidad de hacer cosas extravagantes del lado del servidor (aunque eso probablemente sería una mejor opción)
<iframe src="/path/to/file.html" seamless></iframe>
Dado que los navegadores antiguos no son compatibles, debe agregar algunos css para solucionarlo:
iframe[seamless] {
border: none;
}
Tenga en cuenta que para los navegadores que no son compatibles con la perfección, si hace clic en un enlace en el iframe, el marco irá a esa url, no a toda la ventana. Una forma de evitar eso es que todos los enlaces tengan target="_parent" , aunque el soporte del navegador sea "suficientemente bueno".
No hay una solución HTML directa para la tarea por ahora. Incluso HTML Imports (que está permanentemente en borrador ) no lo hará, porque Import! = Include y algo de JS magic se requerirá de todos modos.
Recientemente escribí una secuencia de comandos VanillaJS que es solo para incluir HTML en HTML, sin ninguna complicación.
Solo a.html en tu a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
Es open-source y puede dar una idea (espero)
Para insertar contenidos del archivo nombrado:
<!--#include virtual="filename.htm"-->
Puede usar un polyfill de Importaciones HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ), o esa solución simplificada https://github.com/dsheiko/html-import
Por ejemplo, en la página importas un bloque HTML así:
<link rel="html-import" href="./some-path/block.html" >
El bloque puede tener sus propias importaciones:
<link rel="html-import" href="./some-other-path/other-block.html" >
El importador reemplaza la directiva con el HTML cargado como SSI
Estas directivas se servirán automáticamente tan pronto como cargue este pequeño JavaScript:
<script async src="./src/html-import.js"></script>
Procesará las importaciones cuando DOM esté listo automáticamente. Además, expone una API que puede utilizar para ejecutar manualmente, para obtener registros y así sucesivamente. Disfrutar :)
Puedes hacer eso con jQuery de la biblioteca de JavaScript de esta manera:
HTML:
<div class="banner" title="banner.html"></div>
JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
Tenga en cuenta que banner.html debe estar ubicado bajo el mismo dominio en el que se encuentran sus otras páginas; de lo contrario, sus páginas web rechazarán el archivo banner.html debido a las políticas de Intercambio de recursos entre orígenes .
Además, tenga en cuenta que si carga su contenido con JavaScript, Google no podrá indexarlo, por lo que no es exactamente un buen método por razones de SEO.
Sé que esta es una publicación muy antigua, por lo que algunos métodos no estaban disponibles en ese entonces. Pero aquí está mi versión muy simple (basada en la respuesta de Lolo).
Se basa en los atributos de datos * de HTML5 y, por lo tanto, es muy genérico, ya que utiliza jQuery para cada función para obtener cada .class correspondiente a "load-html" y utiliza su atributo respectivo "fuente de datos" para cargar el contenido:
<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>
Según la respuesta de https://.com/a/31837264/4360308 , implementé esta funcionalidad con Nodejs (+ express + cheerio) de la siguiente manera:
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($);
...
}
}
anexar -> incluye el contenido en el div
reemplazar -> reemplaza el div
Fácilmente podría agregar más comportamientos siguiendo el mismo diseño.
Una solución muy antigua que cumplí con mis necesidades en ese entonces, pero a continuación le indicamos cómo hacerlo con un código que cumple con los estándares:
<!--[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]-->
Una directiva de inclusión del lado del servidor simple para incluir otro archivo encontrado en la misma carpeta tiene el siguiente aspecto:
<!--#include virtual="a.html" -->
Aquí hay un gran artículo , puede implementar una biblioteca común y simplemente usar el código a continuación para importar cualquier archivo HTML en una línea.
<head>
<link rel="import" href="warnings.html">
</head>
También puedes probar Google Polymer
https://www.html5rocks.com/en/tutorials/webcomponents/imports/ tiene un muy buen tutorial sobre este tema, y puede que sea un poco tarde, pero yo mismo no sabía que existía. w3schools también tiene una forma de hacerlo utilizando su nueva biblioteca llamada w3.js. La cosa es que esto requiere el uso de un servidor web y un objeto HTTPRequest. No puedes cargarlos localmente y probarlos en tu máquina. Sin embargo, lo que puede hacer es utilizar los rellenos de polígono proporcionados en el enlace html5rocks en la parte superior o seguir su tutorial. Con un poco de magia JS, puedes hacer algo como esto:
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);
}
Esto hará que el enlace (puede cambiar para que sea el elemento de enlace deseado si ya está configurado), establezca la importación (a menos que ya lo tenga) y luego agregue. Luego, desde allí tomará eso y analizará el archivo en HTML, y luego lo agregará al elemento deseado debajo de un div. Todo esto se puede cambiar para que se ajuste a sus necesidades desde el elemento adjunto hasta el enlace que está utilizando. Espero que esto haya ayudado, puede ser irrelevante ahora si han surgido formas más nuevas y rápidas sin usar bibliotecas y marcos como jQuery o W3.js.
ACTUALIZACIÓN: Esto generará un error que indica que la importación local ha sido bloqueada por la política CORS. Es posible que necesite acceso a la web profunda para poder usar esto debido a las propiedades de la web profunda. (Significando no uso práctico)
usando jquery necesitas importar libreria
te recomiendo usar php
<?php
echo"<html>
<body>";
?>
<?php
include "b.html";
?>
<?php
echo" </body>
</html>";
?>
b.html
<div>hi this is ur file :3<div>
Bueno, si todo lo que quieres hacer es poner texto de un archivo separado en tu página (las etiquetas en el texto también deberían funcionar), puedes hacerlo (tus estilos de texto en la página principal test.html— aún deberían funcionar):
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);
Después de todo, siempre puedes volver a crear las etiquetas HTML que quieras. Se necesitan secuencias de comandos del lado del servidor para capturar texto de otro archivo, a menos que desee hacer algo más.
De todos modos, lo que estoy empezando a usar es para hacerlo así que si actualizo una descripción común entre muchos archivos HTML, solo necesito actualizar un archivo para hacerlo (el .jsarchivo) en lugar de cada archivo HTML que contenga el texto.
Entonces, en resumen, en lugar de importar un .htmlarchivo, una solución más simple es importar un .jsarchivo con el contenido del .htmlarchivo en una variable (y escribir el contenido en la pantalla donde llama al script).
Gracias por la pregunta.
PHP es un lenguaje de scripting a nivel de servidor. Puede hacer muchas cosas, pero un uso popular es incluir documentos HTML dentro de sus páginas, al igual que SSI. Al igual que SSI, esta es una tecnología de nivel de servidor. Si no está seguro de tener la funcionalidad de PHP en su sitio web, comuníquese con su proveedor de alojamiento.
Aquí hay un simple script PHP que puede usar para incluir un fragmento de HTML en cualquier página web habilitada para PHP:
Guarde el HTML para los elementos comunes de su sitio en archivos separados. Por ejemplo, su sección de navegación podría guardarse como navigation.html o navigation.php. Use el siguiente código PHP para incluir ese HTML en cada página.
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
Use ese mismo código en cada página que desee incluir el archivo. Asegúrese de cambiar el nombre del archivo destacado por el nombre y la ruta de acceso a su archivo de inclusión.
Si utiliza algún marco como django / bootle, a menudo envían un motor de plantillas. Digamos que usa una botella, y el motor de plantillas predeterminado es SimpleTemplate Engine . Y abajo está el archivo html puro.
$ cat footer.tpl
<hr> <footer> <p>© , inc 2015</p> </footer>
Puedes incluir el footer.tpl en tu archivo principal, como:
$ cat dashboard.tpl
%include footer
Además de eso, también puede pasar un parámetro a su dashborard.tpl.