I want to inject html markup into a div in multiple sites in different platforms. Ideally it would look something like this where each developer can insert a script tag to my js. Lets assume each application has bootstrap and jquery.

<script id="globalheaderapi" src=".js"></script>

and html would only be something like this on the applications

<header id="globalHeader"></header>

I want to insert my html markup inside header. I would also want to js to insert link to css source.

The question is, the apps only have jquery.

 $( document ).ready(function() {
  //insert link to header css   
    $('head').append('<link rel="stylesheet" href="globlalHeader.min.css" type="text/css" />');

 //insert html in div
 $( "#globalHeader" ).html( "<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>" );
 });

Update

I tried $( "#globalHeader" ).load(... and it works if js and the app is in the same domain if i try it in a different domain i get the crosssite error

   XMLHttpRequest cannot load http://url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

I want to inject html markup into a div in multiple sites in different platforms. Ideally it would look something like this where each developer can insert a script tag to my js. Lets assume each application has bootstrap and jquery.

<script id="globalheaderapi" src="https://www.url./globalheader.js"></script>

and html would only be something like this on the applications

<header id="globalHeader"></header>

I want to insert my html markup inside header. I would also want to js to insert link to css source.

The question is, the apps only have jquery.

 $( document ).ready(function() {
  //insert link to header css   
    $('head').append('<link rel="stylesheet" href="globlalHeader.min.css" type="text/css" />');

 //insert html in div
 $( "#globalHeader" ).html( "<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>" );
 });

Update

I tried $( "#globalHeader" ).load(... and it works if js and the app is in the same domain if i try it in a different domain i get the crosssite error

   XMLHttpRequest cannot load http://url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

• javascript
• jquery

• 3 What's wrong with what you're already doing? – Brad Commented May 21, 2015 at 14:19
• The question you are asking seems to be answered already by what you are doing. What else are you trying to acplish? – Davy Commented May 21, 2015 at 14:32
• that was a starting point. the markup that i want to insert is quite long.. i was just wondering if there was a solution people are using to create global headers and footers .. like an api that works for multiple applications – nolawi Commented May 21, 2015 at 14:47

4 Answers 4

Taking for granted that there is a decent enough reason in your environment to not just use server side includes or something more straightforward, jQuery's .load() seems like it would suit you. You'd just stub out the HTML you'd want to inject and have each page call it like this:

$("#globalHeader").load('globalHeader.html');

Your CSS injection looks fine, though I'm curious why if you have access to the site to insert a script tag you can't just add the link tag.

If they have anything else in that global-header, .html() will overwrite it.
A better approach would be to append your content as children.

var parentEl=$('#global-header');
var myDiv= $('<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>');
myDiv.appendTo(parentEl);

Your CSS link addition looks good.

First of all, take in mind that if you append css link to the header almost all modern browser will load and parse that css, but you have no chance to know when. This means that your injected html can be displayed unstyled during unpredictable time lapse.

You can try to mitigate it hidding contents and display it later with a .show() call after a timeout but, anyway (1) Most of time you will delay more than necessary and (2) many times could to not be enought.

So, if your css is not huge, I reend you to apply it with jquery's .css() method and then do a .show() over your container.

Regarding the crosssite error using .load(), I think there exists a parameter to disable that warning (but I doesn't remember what and not sure if I'm wrong). But, anyway, you can implement the same behaviour simply obtaining the html via .ajax() call and then append with .append() (or replace it with .html()) to the container's content.

XMLHttpRequest works across different domains. However the server should be configured to allow these requests. Browser denies this request after it checks an HTTP header.

Suppose your code is like:

$( "#globalHeader" ).load("http://somedomain./path")

The code running in somedomain. site should return the appropriate headers like:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

The first line Access-Control-Allow-Origin: * allows the requests to be made by any other domain. You can also limit these domains with this header like

Access-Control-Allow-Origin: micrositeA., micrositeB., micrositeC.

Your http server should allow OPTIONS method for this to work (should check this). You may consult your http server documentation how to achieve this.

You can check this entry for CORS (Cross-site HTTP Requests)

How does Access-Control-Allow-Origin header work?

and

https://developer.mozilla/en-US/docs/Web/HTTP/Access_control_CORS