How to load an external file from within an HTML?

Question

I have static HTML files, each looks like the following.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
    p {
        width: 100px;
    }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>
</head>
<body>
    <div id="accordion">
        <h1>Chapter 1</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
        <h1>Chapter 2</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
    </div>
</body>
</html>

Because

    <meta charset="utf-8" />
    <style type="text/css">
    p {
        width: 100px;
    }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>

is the common code, I want to extract it and put into a new file named common.html.

Question

I try load common.html with link tag but it produces a strange output.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="import" href="common.html"/>
</head>
<body>
    <div id="accordion">
        <h1>Chapter 1</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
        <h1>Chapter 2</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
    </div>
</body>
</html>

What is the proper way to load?

Fred Rocha · Accepted Answer · 2017-02-13 18:11:42Z

2

You can't include HTML code just by linking it that way.

If you want to have a templating engine managing your website either go for a flat website generator like Jekyll, use a framework such as Ruby on Rails or Symfony or roll out your own (using php, for instance).

edited Feb 13, 2017 at 18:11

answered Feb 13, 2017 at 18:09

Fred Rocha

4403 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Display Name Over a year ago

I have to use static HTML files.

Fred Rocha Over a year ago

Then Jekyll is a good way to go. Check their templating feature here.

Fred Rocha Over a year ago

Hey, @SingleFighter, any luck with this? Did you settle for a specific technology in the end?

user6656465 · Accepted Answer · 2017-02-13 18:12:35Z

1

Check out Jekyll. It is a static webpage generator. https://jekyllrb.com/

answered Feb 13, 2017 at 18:12

user6656465

Collectives™ on Stack Overflow

How to load an external file from within an HTML?

Question

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Question

2 Answers 2

3 Comments

Comments

Related