Include en HTML o Javascript
Aveces deseamos incluir archivo web sobre otro archivos pero sucede que deseamos incluir sobre uno tipo .html siendo este .asp, .php, cshml.
Sobre un archivo html no se puede incluir los include del lenguaje de programación tal como en php usamos <?php include("index.php");?>
Tampoco es de buena forma usar los iframe y sobre todo se complican un poco mas cuanso estos deben recivir parametros.
Para esto podemos usar los include de html y javascript.
Include con HTML javascript
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
Es importante incluir en el head la libreria w3.js, de lo contrario no funcionara.
Podemos descargarlo en la url: https://www.w3schools.com/lib/w3.js
o incluirlo en nuestro archivo de la siguiente formas:
<script src="https://www.w3schools.com/lib/w3.js"></script>
o
<script src="/lib/w3.js"></script>
En el body colocamos el archivo que deseamos mostrar en la pisicion deseada:
<div w3-include-html="content.html"></div>
abajito aagregamos el codigo:
<script>
w3.includeHTML();
</script>
para incluir el HTML.
En el body colocamos el archivo que deseamos mostrar en la pisicion deseada:
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
Es importante incluir en el head la libreria w3.js, de lo contrario no funcionara.
Podemos descargarlo en la url: https://www.w3schools.com/lib/w3.js
o incluirlo en nuestro archivo de la siguiente formas:
<script src="https://www.w3schools.com/lib/w3.js"></script>
o
<script src="/lib/w3.js"></script>
En el body colocamos el archivo que deseamos mostrar en la pisicion deseada:
<div w3-include-html="content.html"></div>
abajito aagregamos el codigo:
<script>
w3.includeHTML();
</script>
para incluir el HTML.
Include en AngularJS o javascript
Es importante incluir en el head la libreria https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js
En el body colocamos el archivo que deseamos mostrar en la pisicion deseada:
<div ng-include="'nuestroARCHIVO.html'"></div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">
<div ng-include="'nuestroARCHIVO.html'"></div>
</body>
</html>
Si vemos, ambos llaman una libreria .js pero el ejemplo en angular es menos linea de código.
Para mas informacion:
Slds.
Comentarios
Publicar un comentario