Example

How to include an HTML page into another HTML page without frame/iframe?

I want to include an HTML page inside an HTML page. Is it possible? I don’t want to do it in PHP, I know that in PHP, we can use include for this situation, how can I achieve the same purely in HTML without using the iframe and frame concept?

15 Answers 15

You can use an object element

or, on your local server, AJAX can return a string of HTML (responseText) that you can use to document.write a new window, or edit out the head and body tags and add the rest to a div or another block element in the current page.

Unfortunately using OBJECT or EMBED tags also introduces HEAD/BODY tags in the included HTML, even if you don’t have them in the sub-HTML. This will break validation and also cause spacing issues so this is not the best solution.

@geneb. Thanks. Exactly what I was wondering. I can’t figure out why you’d ever want these extraneous tags introduced. You got any idea?

If you’re just trying to stick in your own HTML from another file, and you consider a Server Side Include to be «pure HTML» (because it kind of looks like an HTML comment and isn’t using something «dirty» like PHP):

Hey, here i got a idea, i have included the whole content inside the javascript — document.write. then place the javascript file inside the html. It working

If using Server Side Include (SSI) you need to be conscious that it may be difficult for your documents to be cached since the modified time and content length are all dynamic. With Apache you can use XBitHack Full (on UNIX) or mod_expires to set expiry times. I didn’t end up using SSI for this reason.

Just a remark. You need a server with SSI installed on the server for this to work, which is not always the case.

If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery

$("#links").load("/Main_Page #jq-p-Getting-Started li"); 

If you want to use IFrames then start with Wikipedia on IFrames

     The material below comes from the website http://example.com/    

Hey, here i got a idea, i have included the whole content inside the javascript — document.write. then place the javascript file inside the html. It working

I’m surprised that it’s 2022 but we still don’t have client-side SSI without IFrames and JavaScript, but have WebComponents. LOL

You could use HTML5 for this:

Update – July 2020: This feature is no longer supported by most major browsers, and is generally considered obsolete. See caniuse.com for the list of browsers which do still support it.

@Joyal no, this is part of HTML5, some browsers are already support it, but for those that don’t, you can use polymer to polyfill it. caniuse.com/#search=import

@muis , the above code will only work if you load a page from the same domain, else you get the foloowing error : No ‘Access-Control-Allow-Origin’ header is present on the requested resource. This is restricted due to security reasons. For more details see: en.wikipedia.org/wiki/Cross-origin_resource_sharing

This won’t work on a lot of web browsers, if that is an issue for someone (like me): caniuse.com/#feat=imports

This is obsolete since Google Chrome 73. Try to avoid this solution. developer.mozilla.org/en-US/docs/Web/Web_Components/…

You will need to add some styling to this iframe. You can specify width, height, and if you want it to look like a part of the original page include frameborder=»0″ .

There is no other way to do it in pure HTML. This is what they were built for, it’s like saying I want to fry an egg without an egg.

when you do this: is there any way you can have links clicked inside the iframe to change the whole window?

If you’re willing to use jquery, there is a handy jquery plugin called «inc».

I use it often for website prototyping, where I just want to present the client with static HTML with no backend layer that can be quickly created/edited/improved/re-presented

For example, things like the menu and footer need to be shown on every page, but you dont want to end up with a copy-and-paste-athon

You can include a page fragment as follows

Источник

Include html in another html file [duplicate]

I have a html «head» template and a navigation template that I want to include in all my other html files for my site. I found this post: Include another HTML file in a HTML file And my question is. what if it’s the header that I want to include? So for example, I have the following file structure:

 /var/www/includes/templates/header.html navigation.html 

In a case like this, can I still follow the example in the other post where they create a div and populate the div via jquery?

6 Answers 6

I think it would be best way to include an html content/file into another html file using jQuery.

You can simply include the jQuery.js and load the HTML file using $(«#DivContent»).load(«yourFile.html»);

There are no such tags available to include the file but there are some third party methods available like this:

Some people also used server-side-includes (SSI):

Looks like Method 2 has been changed, here is a link to the latest documentation w3schools.com/w3js/w3js_html_include.asp.

@mattruma, Possible, Its been 3 years I gave this answer. And as I said, Method 2 is just a third party plugin/method..

I gather #3 is C++ and not supported by my webserver (?), and I’m not a fan of #2 including an extra .js just for one function, but #1 worked great for me. once I added a callback so code execution wouldn’t continue until the file was fully loaded (since I needed to interact with the loaded elements immediately).

It shows a srollable window in a body tag surrounded by html tag, with head , so it creates a new dom .

Nice! One small limitation though, the CSS styling of the host page isn’t applied to the inserted HTML text (at least not for me on Chromium 87.0/Ubuntu 20). Unless, the styling is included within the imported text.

I needed to include many files. So I created the following script:

Use div, for example, to put a placeholder for the insertion.

Created folder «includes» for all files I needed to include. Created file «example.html». It works with any number of includes. You just have to use the name convention and put all included files in the right folder.

For anyone interested in a Web Component approach:

class HTMLInclude extends HTMLElement < constructor() < super(); this.innerHTML = "Loading. "; this.loadContent(); >async loadContent() < const source = this.getAttribute("src"); if (!source) < throw new Error("No src attribute given."); >const response = await fetch(source); if (response.status !== 200) < throw new Error(`Could not load resource: $`); > const content = await response.text(); this.innerHTML = content; > > window.customElements.define("html-include", HTMLInclude); 

Note that it is possible to do some nice things with a shadow DOM to make sure styling of loaded content does not influence the outer page.

The above code is pretty «modern» JS and you might not want to use the above code directly without some polyfills/babel transpilation.

How to query some elelment in my-html.html ? I cannot query element in that file because when we query, it does not appear in DOM

Using HTML tag.

I have faced similar problem , then I used

This is similar to another custom tag solution, but this one uses the text between the opening and closing tags as the include path/url. The other solution uses the src attribute instead.

The element implementation’s a little trickier:

# -- ./js/html-include.js -- class HTMLInclude extends HTMLElement < constructor(src) < super(); this.attachShadow(); if (src) < this.textContent = src; >setTimeout(() => this._load()); > async _load() < let src = this.textContent.trim(); if (!src) < throw new Error("URL missing between tags."); > let rsp = await fetch(src); if (rsp.status != 200) < throw new Error(`Failed to load file ($) for .`); > this.shadowRoot.innerHTML = await rsp.text(); > > customElements.define("html-include", HTMLInclude); 

The setTimeout() was necessary because this.textContent , if accessed too early, can include all the preceding text of the page (seen on Chrome/Chromium). Deferring the access fixes that.

This is what it looks like incorporated in a page:

      ./partials/toolbar.html ./partials/side-menu.html ./partials/statusbar.html   

CSS styles should be properly applied to the newly imported HTML.

This element can also be created from JS by passing it the URL to the import file.

let wgthost = document.getElementById("tgt"); wgthost.appendChild(new HTMLInclude("./partials/mywidget.html")); 

Источник

How to include one HTML file into another?

I tried with apache server running at localhost/include/index.html or file:///home/sahil/Desktop/include/index.html with all above includes but none of them is working for me 🙁 .Now which method should i use to include one HTML file into another , considering my index.html and include.html both are in same directory .

The first kind of code you have is SSI (the grey one) and the second is PHP (the black and burgundy one). These are not for HTML pages. In HTML pages, you could try using AJAX (easiest way would be to use jQuery’s .load) or an iframe.

4 Answers 4

The former syntax is SSI, the latter is PHP. Both are server technologies and will only work if accessed from an HTTP server that supports and is configured to check the file for the syntax (which usually means you have to turn the support on and use a .shtml/.php file extension (or change the config from the default to determining which files to check)). Other server side technologies are available.

The only «include» mechanisms in HTML itself are (i)frames and objects.

You could also consider a template system such as TT that you could run as a build step to generate static HTML documents (NB: TT can also be used on the fly).

i tried with Iframes thats not a good thing to add. ell me with objects , I frames disturbs the whole page CSS by having extra margin and padding for it

Objects are effectively iframes with worse browser support when used to include HTML documents. So switching to from iframe to object only creates problems (except those involving beancounters demanding Strict variants of HTML when the problem demands something else for an optimal solution).

HTML is Static

It is not possible to include a HTML page within another HTML page with static HTML because it is simply not supported by HTML. To make your HTML dynamic, you have 2 possibilities: use a client side script or use a server side technology.

. Unless you start using frames (dropped with the HTML5 standard) or iframes that are most likely not a solution because of the fact that it is treated as a completely different web page.

Client Solution

You could create a JavaScript file and write your HTML with the document.write function and then include the JavaScript file where ever you need it. Also, you could use some AJAX for this, but there are JavaScript libraries out there that could ease your burden such as the popular jQuery library.

Yet, I would not suggest using a client solution because it is more trouble than it is worth.

Server Solution

There are many server side solutions out there: ASP, ASP.NET, ASP.NET MVC, Java, PHP, Ruby and the list goes on. What you need to understand is that a server a side technology could be described as a parser for a specific server side language to automate certain tedious tasks and to perform actions that would represent a security risk on the client.

Of course you will need to have the means to host such a site and to configure the hosting environment. For example, you could host a PHP website with Apache and even have a developer hosting environment such as /MAMP/LAMP/WAMP.

You can view an example of including a page in PHP in the online documentation.

Personally, I would be more inclined to use a server side solution.

Источник

How to add 1 pure html in another html

I am having 1 pure html page for ex. sample.html. I need to include this html into another pure html for ex.Orginal.html.How to do this? I am having a header image in my sample.html.It should come at the top of the Orginal.html page.

I suppose you want this to be done dynamically? What language do you want to use? Javascript, php, asp.net, .

5 Answers 5

If you’re using Apache web server, you could try using server side includes.

You can’t do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand.

that’s my point 🙂 I’d use something server-side, but if we’re talking here about just a handful of files, the best solution would be to just update HTML — if it’s pure HTML, they would need editing anyway, so why make it more complicated. In such scenario simple edit is the most pragmatic.

Here is an example of how to do it in pure HTML with an iframe, which although strangely not mentioned in HTML 4 specification is supported by all major browsers (and is in the HTML 5 specification)

 
This is original page
 
Some content on original page.
  

You can adjust the width and height and you can also remove the border if you want the page to be more seamless.

Be wary of JavaScript solutions to this problem, especially if you want to be viewed on mobile devices.

Additional note: Avoid frameset solutions also, as they aren’t valid markup.

Источник