-1

I'm playing around with HTML (, JavaScript & CSS) & decided to try to import one HTML from one file into another, the goal is that I can make several modules and just import them into an empty HTML page, so they together create a fully working & content filled HTML page.

I would prefer to use something similar to how scripts or style-sheets are imported:
(ignore the $ signs)
$<script src="file.js"></script>
OR
$<link rel="stylesheet" type="text/css" href="style.css">

The problem is that the $<html>, <head> & <body> tags are inserted again, is there any good way to fix this?

I have tried some methods: $<object> & <embed> &
$<link rel="import" href="file.html">
I don't want to use $<iframe> because I have heard that it's a security problem (yes, it's not relevant right now, but if I'm going to use this method later for real, then it will be important).

I am aware of other similar questions, like this: Include another HTML file in a HTML file
but most of the answers use external frameworks like JQuery or Angular which I don't want to use, I would prefer to use a pure HTML or/and JavaScript solution if possible.

Example code:

  • File to import:

<p>"The import is working"</p>
  • Base file to import into:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>

  <body>
    <!-- Import code here (or in head if it for some reason is required) -->
  </body>

</html>
  • Desired outcome:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>

  <body>
    <p>"The import is working"</p>
  </body>

</html>
  • Actual outcome (with $<object> or $<embed>), (at least as the Firefox inspect-element tool shows it):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
      
  <body>
    <embed src="file.html">
  
      #Document <!-- I don't know what this means/function is, can someone explain? -->
      <html> <!-- Notice the double: html, head, meta & body -tags -->
        <head>
          <meta charset="UTF-8">
        </head>
        <body>
          <p>"The import is working"</p>
        </body>
      </html>
      
    </embed>
  </body>
  
</html>
Dexygen
  • 11,681
  • 11
  • 73
  • 144
Sebastian Norr
  • 3,075
  • 2
  • 8
  • 15
  • What's the problem with HTML Import? – Supersharp Jul 02 '18 at 21:13
  • Similar question: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – ESR Aug 01 '18 at 03:55
  • I have found this JavaScript function: XMLHttpRequest(); * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest * https://www.w3schools.com/xml/xml_http.asp It seams like it could work, but I get blocked by the webb browsers CORS policy (Cross-Origin Resource Sharing) & don't know how to avoid it properly (help?): * https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Sebastian Norr Oct 23 '19 at 08:26

2 Answers2

0

You can use PHP, by making your file names with a .php extension and use PHP include:

<?php include 'header.php';?>

Read more about it here.

Rodin
  • 17
  • 7
0

I've been trying to do the same thing for some time and the only solution I've come up with involves some JavaScript. When you import HTML the #document tag means it lives in the shadow DOM which is different than the one rendered (I think, I don't really understand this stuff). In any case, after importing, I ended up having to render the element and append it to the DOM. 

<!-- Original HTML file -->
<html>

<head>
    <title>Title</title>
</head>

<body>
    <p> 
        Hello from original HTML.
    </p>
    <link id="importLink" rel="import" href="/path/to/import.html">
</body>
<script src="/path/to/renderImport.js"></script>
</html>

I had the following code in my renderImport.js file:

// renderImport.js
function renderImport() {
    let importLink = document.getElementById("importLink");
    let importedElement = importLink.import.querySelector('#import');

    document.body.appendChild(document.importNode(importedElement, true));
}

renderImport();

And finally, import.html:

<!-- import.html -->
<p id="import">Hello from the imported file</p>

Here it is in Chrome. Though you might have to disable CORS.

Abdullah Islam
  • 1