How to include one html page(as header) in another html page?

Question

I am trying to include an html page that will be header to my main page. Both pages are deployed to different servers. I currently doing it using frames. The header currently has some fixed width and I am not able to change its width I need it to fit the screen of my main page. Is it possible using frames or is there any other approach I could use for this?

Use a master page in ASP.net if you are using asp.net. Looks like you are using asp.net? — Akshay Khandelwal, Sep 27 '13 at 09:45
I have edited my question to add more detail. Both pages are at different servers. — Surinder, Sep 27 '13 at 09:47
As mentioned in the answer below: I am accessing the header content through a url like "www.testsiteheader.com/header.html". — Surinder, Sep 27 '13 at 10:54

mxh · Answer 1 · 2013-09-27T11:31:55.293

1

You could use php (in case your server is able to run php files) Assuming your html files are called "header.html" and "content.html", the php file could look like that:

<html>
<?php
$HEADER_URL = "www.testsiteheader.com/header.html";
Include($HEADER_URL);
Include("content.html");
?>
</html>

As an example, this code:

<?php
Include("http://stackoverflow.com/questions/19047619/how-to-include-one-html-pageas-header-in-another-html-page");
?>

made the site look like this: http://imgur.com/QB5MZu6

IMPORTANT: You might have to change this in your php-config file:

allow_url_include = Off

TO

allow_url_include = On

edited Sep 27 '13 at 11:31

answered Sep 27 '13 at 10:46

mxh

63
8

eidted my initial answer to better suit the question – mxh Sep 27 '13 at 11:31
While your answer might be technically correct, the author does not use PHP, or has monetioned it (in the tags section). – Marco Sep 27 '13 at 11:35
Thanks for pointing that out^^ I´ve had a simple answer in mind, which solves the general problem, so I didnt bother that much about the tags. Sorry about that. Because the author wrote "any other approach" I´ve assumed that he might be interested in all anwsers, even answers, which use things he didnt mention (maybe because he didnt think about them ;)) – mxh Sep 27 '13 at 11:55
the php won't work for me actually since server is not able to run php files – Surinder Sep 28 '13 at 04:27

score 0 · Answer 2 · answered Sep 27 '13 at 09:51

You can use jQuery and Ajax to manage this :

The following function will run on the document.ready event and call the Ajax function of jQuery to access the URL set in an asynchronous manner, if the code errors the error function is executed and an error will be displayed on the page. If successful the success function will execute and set the DivName controls' html content to the retrieved object.

    $(document).ready(function() {
        $.ajax({ 
            url: 'MyPage.aspx', //path to external file
            async: true,
            error:function(ajaxrequest){
                $('#DivName').html('Error fetching content. Server Response: '+ajaxrequest.responseText);
            },
            success:function(content){
                $('#DivName').html(content);
            }
        });
    });

This code relies on the fact you have an external page called MyPage.aspx and a control on the current page with ID of DivName

I am accessing the header content through a url like "www.testsiteheader.com/header.html". Will the solution work in this case? — Surinder, Sep 27 '13 at 09:55
Ah, re-read your edited question. Unfortunately this probably won't work for cross domain calls. See [here](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) for details, although this talks about Services it should have some relevance. — Nunners, Sep 27 '13 at 10:01

How to include one html page(as header) in another html page?

2 Answers2