Member Avatar for samson.oba.77

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 !

  • 5 Contributors
  • 6 Replies
  • 23K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by samson.oba.77

Dani AI

Generated

If you control both documents, scrollbars usually appear because the embedded page overflows its own viewport. With an iframe or object, remove borders and auto-size the container to the child document’s height. For same-origin pages you can read the child’s height on load and set the iframe height dynamically:

<iframe id="embed" src="/path/page.html" style="width:100%;border:0;" onload="
  var d = this.contentWindow.document;
  this.style.height = Math.max(d.documentElement.scrollHeight, d.body.scrollHeight) + 'px';
"></iframe>

Also set html, body { margin:0; overflow:hidden; } in the embedded page to prevent inner scrollbars. If the pages are on different origins, you cannot read the child’s DOM; have the child send its height with window.postMessage and resize in the parent on receipt. See MDN: window.postMessage.

If your goal is to reuse fragments (header/footer) without frames, consider in-browser composition with the Fetch API and a placeholder element. This pulls HTML into the current DOM (subject to CORS) and avoids a nested browsing context. Note that scripts in fetched HTML will not execute automatically; prefer fragments that only contain markup and styles. For long-term maintainability and accessibility, server-side composition or a build step is typically more robust than client-side includes. See MDN: <iframe> for iframe behavior and constraints, and note that the seamless and scrolling attributes are obsolete and not supported in modern browsers. HTML Imports are deprecated; avoid them (MDN: HTML Imports).

Recommended Answers

All 6 Replies

Member Avatar for tdrosiadis

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/

Member Avatar for Alicera Nz

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 for Member #120589

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

Member Avatar for samson.oba.77

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.