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 !

Recommended Answers

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 …

Jump to Post

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

Jump to Post

All 6 Replies

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/

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

  1. 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>
Member Avatar

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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.