Hi! I want to put a html file into another html file . I tried iframe and object tag, which works but the problem is i also get scrolling frames. How can i insert a html file into another html file as it is without anything added to it like scrolling bars ?
Thx !
samson.oba.77
0
Newbie Poster
Recommended Answers
Jump to PostThe best way is server side using either php or asp.net or any other server side language.
If server side is not an option for you than sticking with your iframe you can hide bars like this in css:<iframe src="/path/to/file.html" seamless></iframe>iframe[seamless] {border: none;}
Remember though that iframes have many, many …
Jump to PostYou could also use the object element to include HTML content.
<object data="incl/foo.html">Warning: foo.html could not be included!</object>W3C even recommends this over an iframe:
http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
All 6 Replies
tdrosiadis
0
Light Poster
The best way is server side using either php or asp.net or any other server side language.
If server side is not an option for you than sticking with your iframe you can hide bars like this in css:<iframe src="/path/to/file.html" seamless></iframe>iframe[seamless] {border: none;}
Remember though that iframes have many, many disandvantages.
Another way can ve JavaScript. You can see some hints here:
http://www.boutell.com/newfaq/creating/include.html
and here:
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
gentlemedia
803
Master Poster
You could also use the object element to include HTML content.
<object data="incl/foo.html">Warning: foo.html could not be included!</object>
W3C even recommends this over an iframe:
http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
Alicera Nz
0
Newbie Poster
You can do with two option, pure HTML or javascript/jquery:
for example, you have a file "footer.html" to be included in index.html
in Javascript
<script>
$(function(){
$("#include_html").load("footer.html");
});
</script>
inside <body> tag (or, where you want to include the file (footer.html)), place this:
<div id="include_html"></div>
Note: If you have more than 1 file included, just add new line below $("#include_html").load("footer.html"); with different Selector, as in;
<script>
$(function(){
$("#include_header").load("header.html");
$("#include_footer").load("footer.html");
});
</script>
Alicera Nz
0
Newbie Poster
UPDATED from my answer:
Do not forget to place this following link inside your <head> tag.
Ex:
<head>
<title>This is title of my web</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head
diafol
Note that .load() requests files from the server.
An alternative would be to use SSI (server side includes):
http://en.wikipedia.org/wiki/Server_Side_Includes
<!--#include file="footer.html" -->
However the "containing page" should have the specific extensions .shtml, .stm or .shtm. That is sometimes a deal breaker for some. If you don't want to use php or asp or any other flavour of full-blown server side language, SSI could provide a simple fix without needing to include a js library. SSI will work even if the user has js turned off (rare but a possibility).
samson.oba.77
0
Newbie Poster
Thx for the help !
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.