Including html in html with jquery load not working

Question

I'm new to web dev so I feel like I'm missing something simple. I really just need someone to point out what I missed?

I'm trying to include a local html file into another html file using jquery load() function. I followed some suggestions from other stackoverflow posts. It seems like it should be very simple and work fine, but it's not working. I did add the jquery source into the head, and made sure the part where I'm inserting in the body included the correct div id. I don't need to insert a particular portion of the local html, just the whole thing. That html is just text and only includes <p> tags and similar things.

Here's the code:

<html>
<head>
    <meta charset="utf-8" />
    <title>letters on the road</title>
    <link rel="stylesheet" type="text/css" 
    href="../assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script> 
    $(function(){
        $("#includedContent").load("text-012518.html"); 
    });
    </script> 
</head>
<body style="font-family:Andale Mono Regular">
    <div id="includedContent"></div>
    <a href="../index_v2.html">home</a>
</body>
</html>

I feel like jquery load seemed the cleanest option. I did try using the object tag, but it puts the text in a tiny scrollable box in the corner of the window. I'm not familiar enough with css to fix it, so still hoping that jquery load will work well.

My code above doesn't throw error, it just doesn't include anything at all from the external html. (The text in the external html did show up with object so I don't think it is a problem with the external html itself.) I've also tried the code without the $(function(){}); wrapper and it also doesn't work.

what shows up on the page

give it the full path of the html file correctly, example .load('/index2.html') — mustafabarakat, May 23 '20 at 19:56
Can you add the file hierarchy of relevant files in question please... — dale landry, May 23 '20 at 20:01
Can you check the developer console. Are you getting a CORS exception ? — Mukesh Keshu, May 23 '20 at 20:18
Try adding a callback function to [the `load` call](https://api.jquery.com/load/) to see if it is succeeding. — Heretic Monkey, May 23 '20 at 21:54
Oh yeah! thanks, @Mukesh Keshu there's a CORS exception in the console. Hmm. I see. — jlin, May 24 '20 at 20:51

score 1 · Accepted Answer · answered May 24 '20 at 03:43

1

Most of the stack overflow solutions (Answer 1, Answer 2 and many more) do not work. The solutions implemented with Jquery .load() or XMLHttpRequest fails (at least on chrome) due to CORS issue. Work around will be to disable the security by adding --disable-web-security flag or using a CORS chrome extension, which both are only suitable for testing and not on a production application.

Access to XMLHttpRequest at 'file:///.../text.html' from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

These two approaches work -

Use <object> tag -

<object data="test.html"></object>

Use iframe tag -

<iframe src = "test.html" height="80px" width="500px" >

My approach would be to use Jquery/vanila javascript to load the html using the object tag. Add the script tag to the bottom of the page. Looking for more answers.

<script>
document.getElementById("includedContent").innerHTML='<object data="text.html"></object>';
</script>

answered May 24 '20 at 03:43

Mukesh Keshu

467
2
13

I gave object and iframe documentation and cursory scan and I'll try it out with iframe. I'll let you guys know how it goes. Thanks! Mostly bc seems like object is recommended for inserting plugins? But I'll try your suggestion too. – jlin May 24 '20 at 20:54
I did get some semblance of working code with iframe (I'm about to post a separate question on styling). Can you expand on why you would go with object instead? Not too familiar with the differences and benefits of each. I did see that most iframe examples leaned towards videos and calendars though. – jlin May 24 '20 at 21:42
1

Both of them have their own merits and demerits. For one thing - iframes are difficult to debug and difficult for javascript to manipulated contents. See this - https://stackoverflow.com/questions/23178505/good-reasons-why-not-to-use-iframes-in-page-content – Mukesh Keshu May 25 '20 at 02:43
Although object and iframe does not work in my case, it's a fixed sidenav + style, and it is working offline(I use it to write my program's help files) - so everything looks wrong, this atleast points me in the right direction, so thanks! Firefox has the same issue btw – ichad.c Apr 17 '21 at 07:47

Including html in html with jquery load not working

1 Answers1