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
– mustafabarakat, Commented May 23, 2020 at 19:56
Can you add the file hierarchy of relevant files in question please... — dale landry
– dale landry, Commented May 23, 2020 at 20:01
Can you check the developer console. Are you getting a CORS exception ? — Mukesh Keshu
– Mukesh Keshu, Commented May 23, 2020 at 20:18
Try adding a callback function to the load call to see if it is succeeding. — Heretic Monkey
– Heretic Monkey, Commented May 23, 2020 at 21:54
Oh yeah! thanks, @Mukesh Keshu there's a CORS exception in the console. Hmm. I see. — jlin
– jlin, Commented May 24, 2020 at 20:51

Mukesh Keshu · Accepted Answer · 2020-05-24 03:43:05Z

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, 2020 at 3:43

Mukesh Keshu

4672 silver badges13 bronze badges

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

4 Comments

jlin Over a year ago

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 Over a year ago

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.

Mukesh Keshu Over a year ago

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 - stackoverflow.com/questions/23178505/…

ichad.c Over a year ago

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

Collectives™ on Stack Overflow

Including html in html with jquery load not working

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related