So, I have a server.js file which loads an index.html file.
The question is, is there any way to import another html file in index.html.
To simplify, let's say I have an html file named footer.html and I want to import it in my index.html. How can I do it?
you can inline send your html, or use 'fs' module to read html file and send it.
but it is better to use template engine, like ejs, handlebar, etc.
see this tutorial for more info
https://scotch.io/tutorials/use-ejs-to-template-your-node-application
You can use jquery to accomplish this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("index.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Related
I need to create an html file that contains only content within a form tag of another html file, and nothing else. Is there any way to do this?
You can dynamically load html snippets after your main page loads using javascript. Something like this:
main.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Form</h1>
<div id="container"></div>
</body>
</html>
form.html
<form>
<input value="testing" />
</form>
script.js
var formUrl = 'form.html';
$(window).on('load', function(){
$.get(formUrl, function(res){
$('#container').append($(res));
})
})
Here is a working plunk
Using webcomponents, it possible to import HTML from other files.
But this isn't widespread nor supported by all major browsers and maybe not what you're looking for.
You should really start by using a programming language like PHP, Ruby, Python or similar.
I have a Scala-Spray application/project and I'm trying to serve an HTML page when I select a certain route.
In this HTML page, I need to "include" some files from my path, but I'm missing something since I can't load them properly, as in this example (js file, but it could be an image as well).
Here's the code I wrote to "load" a javascript file in my html page:
path("myPath") {
respondWithMediaType(`text/html` ) {
complete {
var html =
"""
<html>
<head>
<script type="text/javascript" src="file:///home/myUser/Desktop/myFile.js"></script>
<script type="text/javascript">
$(function() {
...
});
</script>
</head>
How can I refer to my "local" files in order to load them in the HTML page?
What Am I missing?
Thanks in advance
FF
I was wondering how to add a header (or just any html file) into another html file. I tried using iframes, but it just redirected what was inside of the iframe. Once I finish my website, I will probably have a lot of pages, so it will be very useful to just be able to add a header that can be updated by only changing one file, instead of having to change it on all of the pages. Does anyone know how to do this? Thanks in advance.
With jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
With JavaScript without jQuery:
<html>
<body>
<script src="b.js"></script>
</body>
</html>
b.js:
document.write('\
\
<h1>This is my include file</h1>\
\
');
With PHP:
<?php include('b.html');?>
For this to work you may have to modify the .htaccess file on your web server so php may be interpreted within .html files. You should see, or add, this within your .htaccess file:
RemoveHandler.html
AddType application/x-httpd-php .php .html
With Service Side Includes (SSI):
<!--#include virtual="a.html" -->
With HTML5:
<object name="foo" type="text/html" data="foo.inc"></object>
Alternatively:
<embed type="text/html" src="foo.inc">
I have searched for no javascript way but I couldn't make it work. Here is the simplest way of including HTML
you can create html files for header, footer, content, anything you want to have in a separate file and all you need to do is:
1.put this in your page
<script src="https://www.w3schools.com/lib/w3.js"></script>
you could also download the w3.js and upload it to your server files
<script src="/lib/w3.js"></script>
2.then where ever you want your html code, from the separate file, to be included to your page:
<div w3-include-html="header.html"></div>
for example
Google
<div w3-include-html="footer.html"></div>
<h1>Title of current page</h1>
<div w3-include-html="content.html"></div>
include the next code anywhere after the previous "include" codes
<script>w3.includeHTML();</script>
source w3schools.com How TO - Include HTML
so this is how it can look
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<script>w3.includeHTML();</script>
I'm trying to use an HTML file with CSS throught this code:
<link rel="stylesheet" type="text/css" href="myfile.html" />
I cannot access to the server and make new files so the server provides the option to create HTML files and I wanna use them as CSS hosts. Is this possible?
you can try to include the html containing css in the other html so myCssfile.html is :
<style>
//enter CSS code here
</style>
and then your main html file:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("myCssFile.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I'm using here the JQuery function .load but it probably can be done with pure JS
If the file contents are valid CSS and the type attribute is set correctly, then the browser will believe you that it's a CSS file and will parse/use it as such.
<html>
<head>
</head>
<body>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'abc.html' );
});
});
</script>
<div id="content">
<p>Here comes some content</p>
</div>
<div>Link</div>
</body>
</html>
In the code, i want to load abc.html content inside with id="content" when link inside is clicked.
This code does not work. Can anyone please help me..
I think your syntax is fine... This is probably a path issue. Remember that using "abc.html" as the path means that you are looking for a file called "abc.html" in the current directory.
For confirmations sake, check that abc.html is not empty, then make sure it is in the same folder as the calling file (or specify the correct path to the file). If that then works, then I suggest reading up on Absolute vs. Relative paths/URLs.