is it possible, or how could I make it so, I can include my topbar file into my page, I'd prefer it not to be with php since I am not hooked up with localhost yet.
Thanks for all help in advance!
Add a comment
|
6 Answers
HTML5 now allows you to include html files like you can already include a css file via an import. However, this would only be helpful for during your development stages and not for the final production version since the feature currently is only available in Chrome and will take time for the other browsers to adopt: http://www.html5rocks.com/en/tutorials/webcomponents/imports/
3 Comments
GetFree
So far (october 2017), no other browsers have plans to implement this feature (caniuse.com/#feat=imports)
John Pavek
I'm here from the future to tell you this will be deprecated in Chrome 73 (early 2019), and Firefox never finished their implementation.
slumbering
HEADS UP ! HTML Imports are deprecated and was removed from Chrome in February 2020.
If you don't want to use PHP nor any other server-side scripting language,
you can use either <iframe> or <frameset> tags, which are deprecated, or perform an AJAX request using Javascript that embeds your HTML page dynamically. Second approach will work only if the page you're trying to attach is located within the same domain due to XSS protection in modern browsers.
Comments
It's more of a server thing, so to speak, so you would have to rely on the server more for this. Because, you cannot simply do this using static script, like HTML. There's no "built-in function" that can do this, it's not HTML's thing.
I mean, server will offer you more than one option, for example:
You can:
Use SSI (Server-side Includes) if server supports it.
Use PHP or ASP includes.
- Otherwise, you can use AJAX for this, won't cost you as much as the above options.
If you mean "header" by saying "topbar", I think it's not a good idea to use iframes.
Comments
Files which are truly HTML parsed files can not include another file to my knowledge.
If you web server will parse php you could simply change the extension of the the main file to .php and include() the topbar file:
mv index.html index.php index.php:
include_once("topbar.html");
Comments
Use <!--#include file="footer_text.html" -->
inside html page.
Plz, check below url for details.
https://www.lifewire.com/include-html-file-in-another-3469529
Comments
you can fetch the .html file and put it into your html using javascript:
$(document).ready(function() {
// Load the external header HTML into the page
fetch('/html_templates/template.html')
.then(response => response.text())
.then(html => {
// set contents of template to specific div
$('#container_id').html(html);
})
.catch(error => console.error('Error loading template:', error));
console.log("DOMContentLoaded");
});
index.html
<html>
<body>
<script src="js/jquery-3.7.1.min.js"></script> </script>
<div id="container_id"></div>
</body>
</html>
you need to download jquery (jquery-3.7.1.min.js) and put it into folder /js