How to include data from another HTML to another without PHP

Question

This is my first question here so try to make my best so you can understand it clearly... So my problem is that I want to load menus and footers from external HTML file so It would be easier later modify them. I can't use php or other server-side languages cause it's for school and I use it from usb stick.

My current code goes like this:

<head>
    <title>SchoolStuff</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="header">
        <p>[Stuff here]</p>
    </div>
    <script > 
     $("#header").load("/header.html #header"); 
    </script> ...

and in the header.html it look like this:

<body>
<div id="header">
    <ul>
      <li><a href="#"> Just a Test</a></li>
    </ul>
 </div>

So do you guys have any ideas how to do this? It doesn't matter if you solve this in something else than jquery but it can't be server-side language. And IFrame doesn't work for this kind of purpose because I don't want the whole page. I just want specific parts.

EDIT: ok it looks like it just wont work in chrome (which is really weird though) so if you have any ideas to get it work in chrome too it would be appreciated
EDIT 2: I decided to put my site online so it's easier for everyone...

SSI is a good simple server-side tool to factor websites. For example, Apache supports it. — Kerrek SB
– Kerrek SB, Commented Mar 24, 2012 at 20:29
@Kerrek SB but problem is here that I cant use any servers so browsers have to do the job. Otherwise I would use php to do this. — aaro
– aaro, Commented Mar 24, 2012 at 20:34
@Whymarrh It just doesn't load the contents of header.html to the index.html... — aaro
– aaro, Commented Mar 24, 2012 at 20:36

ogur · Accepted Answer · 2012-03-24 21:03:35Z

2

This should be working:

<script > 
$(function(){
     $("#header p").load("header.html"); 
})
</script>

answered Mar 24, 2012 at 21:03

ogur

4,6162 gold badges20 silver badges17 bronze badges

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

1 Comment

aaro Over a year ago

in that case it would be same to use iframe without css styles. But the problem here seemed to be that it just doesn't work in chrome because it doesn't support to load files from local system like whymarrh stated above. And I made a domain and put the files in server so I can use PHP to do this kind of stuff(and more).

Community · Accepted Answer · 2017-05-23 10:34:36Z

0

Without the use of server-side technologies, I don't believe this is possible. JavaScript adheres to the same origin policy, and when loading files via the file:// protocol the origin I believe is set to null.

In my testing, I'm getting the error: Origin null is not allowed by Access-Control-Allow-Origin. Which leads me to believe that you cannot load files from the local filesystem (small white lie, this may help).

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Mar 24, 2012 at 20:49

Whymarrh

13.7k16 gold badges61 silver badges112 bronze badges

3 Comments

aaro Over a year ago

Thanks... Pretty weird that this doesn't work in Chrome... I am going to put a big header to this site that it doesn't work properly in Chrome then..

Alex Over a year ago

@thePenahi see ogur's answer. You can't pass a CSS selector in the .load() function call. See the documentation for usage: api.jquery.com/load

aaro Over a year ago

@AlexW See the page you linked again! You can use CSS selectors. And this just doesn't work in chrome, the code I made works fine in Firefox.

Collectives™ on Stack Overflow

How to include data from another HTML to another without PHP

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related