HTML to import another HTML file not displaying correctly

Question

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!

Also, I can't (to my knowledge) just modify the CSS files that the site uses because those are written over as well with each upload, so it'd be the same thing (having to redo after each upload). That's why I'm doing this. — Jared Caputo, Apr 30 '16 at 18:32
`$( "#someDiv ).load( "jaredcaputo.photography/1/index.html" );` — Wesley Smith, Apr 30 '16 at 18:36
@DelightedD0D I did that here, doesn't seem to work: http://jaredcaputo.photography/1/index2222.html — Jared Caputo, Apr 30 '16 at 18:40
@DelightedD0D From Index 22? I did there, updated above. Or from index.html? If it's index.html, it's going to replace that every time it re-uploads the file (which means I'd be in the same situation if I had to delete it from that file every time). — Jared Caputo, Apr 30 '16 at 18:45
well, in index22 you have these errors http://prntscr.com/ays924 you should fix those and see if it works — Wesley Smith, Apr 30 '16 at 19:00
@DelightedD0D I'm not getting any of those errors. How did you find them? They're not coming up in my console. — Jared Caputo, Apr 30 '16 at 19:09
Your code is a mess too, I see you loading 2 different jquery APIs and a bunch of jquery loading inside the body after all your content..... Whiskey Tango Foxtrot. — Wobbles, Apr 30 '16 at 19:19

score 2 · Answer 1 · answered Apr 30 '16 at 19:15

2

AJAX is normally used for this. Put this in the top of the two pages that you want to import INTO:

$(document).ready(function(){
    $.get( "index2.html", function( data ) {
       $( "body" ).append(data);
    });    
});

It simply gets and appends the index2.html file onto the body of the current page.

answered Apr 30 '16 at 19:15

PeterM

439
2
9

I did this at jaredcaputo.photography/1/index3.html Like the others, it appears to not display anything, despite loading the necessary things. – Jared Caputo Apr 30 '16 at 19:22
@JaredCaputo These answers work, you must be implementing them wrong. – Wobbles Apr 30 '16 at 19:24
@Wobbles I see that all of them work. They're all loading what needs to be loaded and whatnot. I see everything in elements in Developer Mode. The problem is just that nothing is displaying. This is now what I need help fixing. – Jared Caputo Apr 30 '16 at 19:28
Do you have any suggestions as to why/how @Wobbles? Is it the following error? "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience." If so, any ideas how to fix that? This shows up on index2. I'd greatly appreciate the help. – Jared Caputo Apr 30 '16 at 19:34
@JaredCaputo If it's showing in the DOM in the Developer Panel, then your most likely problems are: 1) No visible code. For example, none of your pages above would actually show anything because it's all header/script stuff. Put a
Hello World
into the BODY of the page that is being called and try again. 2) Restart your browser. I've seen browsers get weird with enough testing. 3) Make sure everything is getting injected into BODY and not into HEAD or SCRIPT or something invisible. – PeterM Apr 30 '16 at 19:40
@JaredCaputo Your nested page is a complete HTML page with HTML and Body tags, you cannot nest these with nothing but a DIV to separate them. If you must do this weird method of including external content, you will need to use an Iframe. – Wobbles Apr 30 '16 at 19:51
@PeterMark you're right. I put a
Hello World
into the body of index.html and it worked. But I put it just after another div. So does that mean the scripts in the divs aren't running or something? The original file is at jaredcaputo.photography/1/index.html, the one with Hello World is at jaredcaputo.photography/1/index4.html. Index2 with it pulling index.html is at jaredcaputo.photography/1/index.html. That index with it pulling index4.html is at jaredcaputo.photography/1/index41.html. Just so you know, it takes a bit of time to load. – Jared Caputo Apr 30 '16 at 19:58
@Wobbles if I do use an iFrame, can I use the page that the iFrame is embedded in to change the font and whatnot in the page in the iFrame? – Jared Caputo Apr 30 '16 at 19:58
@JaredCaputo Your question isn't clear. If you put text in and it appeared, then it's doing what your original question was about, right? Scripts don't belong in divs, so I'm not sure what you're referencing there. And Wobbles is right, you shouldn't inject one page into another (though it may actually work). Strip all of the head/scripts out of the page you're going to inject... or use an iframe. – PeterM Apr 30 '16 at 20:05

score 2 · Accepted Answer · answered Apr 30 '16 at 19:55

2

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.

answered Apr 30 '16 at 19:55

Wobbles

3,033
1
25
51

Would something like this allow me to do what I need in the iFrame? http://stackoverflow.com/questions/15812946/how-to-applying-css-style-into-an-iframe-content – Jared Caputo Apr 30 '16 at 20:01
The problem is that the edits will get overwritten every time it's updated since it's from an external program. That's why I'm trying to serve a page that shows what the program puts out (and all its corresponding files) but be able to make my modifications -- font, to be specific. – Jared Caputo Apr 30 '16 at 20:04
or are you talking about in the page that has the iFrame? – Jared Caputo Apr 30 '16 at 20:04
@JaredCaputo Then you should really consider using PHP to get the second documents DOM and make modifications as necessary. Since PHP is run server side it can make DOM modifications prior to the DOM being served to the client. – Wobbles Apr 30 '16 at 20:07
I originally was working in PHP but I was having trouble with nginx which I just fixed. All works now! – Jared Caputo Apr 30 '16 at 21:08
The php code (without my Adobe TypeKit code): "; ?> – Jared Caputo Apr 30 '16 at 21:09
@JaredCaputo If you are doing it that way, your HTML will fail validation as you are placing a stylesheet outside the HTML tags, if you care about such things, which you should.And you should be using `DOMDocument::loadHTMLFile`. – Wobbles Apr 30 '16 at 21:54

David Watson · Answer 3 · 2016-05-01T16:22:00.763

1

Why not just use HTML imports as described in the Web Components spec?

If you're concerned with browser compatibility, there's also a polyfill, which you can learn about here.

edited May 01 '16 at 16:22

answered Apr 30 '16 at 18:47

David Watson

44
2

Made this jaredcaputo.photography/1/index22222.html. Doesn't appear to be working for me. – Jared Caputo Apr 30 '16 at 18:51
Remove the domain and use relative paths, may be incorrectly seeing it as a cross domain trust issue. – Wobbles Apr 30 '16 at 19:09
@Wobbles Are you referencing the link I pasted? That's just where I implemented it. – Jared Caputo Apr 30 '16 at 19:29

HTML to import another HTML file not displaying correctly

3 Answers3