Jared Caputo Jared Caputo - 7 months ago 341
Javascript Question

HTML to import another HTML file not displaying correctly

I need to essentially import another HTML file into an HTML file. I've tried three different setups of this, linked below, and none of them display properly. I would appreciate any help in fixing this. For those who are wondering why I am doing this, the HTML and other linked files are created using a program which uploads frequently and write over the old files, and I would like to do this so I can change the fonts without having to redo that every time a new copy is uploaded.

Here's those links: jaredcaputo.photography/1/index2.html, jaredcaputo.photography/1/index22.html, jaredcaputo.photography/1/index222.html

Index 2:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("index.html");
});
</script>
</head>

<script>
var LR = LR || {};
</script>

<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="assets/css/custom.css" >

<body>
<div id="includedContent"></div>
</body>

</html>


Index 22:

<head>
<link rel="import" href="index.html">
</head>


Index 222:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="index.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>


The file I'm trying to import is jaredcaputo.photography/1/index.html

Thanks very much!

Answer

The samples are working fine, The page is showing in the DOM, the only part that isnt is the pages body and that's because you are trying to put a <body> element inside a <div> and another page that already has a <body>.

You either need to modify the embedded document to be an incomplete HTML doc without the head and body tags, or you need to use an IFrame to allow the child content to have its own DOM.