I am looking to share a banner from my website on other sites while keeping the banner hosted on my server. I would like other sites to include the banner using JavaScript, similar to Facebook plugins and Google ads.
The banner is located on site A. On site B, I have the following code:
<div id="bannerContainer"></div>
<script type="text/javascript" src="http://mysite.com/plugins/includebanner.js"></script>
The includebanner.js file makes an AJAX call to fetch the banner and insert it into the bannerContainer element. However, I am encountering this error:
Origin http://lventas.com is not allowed by Access-Control-Allow-Origin.
How can I allow all websites to include the banner? Are there any other simple methods to include a banner hosted on site A from another site?
Edit:
This is the script used to request the content:
function ajax(url, container_id)
{
var required_page = false;
if (window.XMLHttpRequest)
{
required_page = new XMLHttpRequest();
} else if (window.ActiveXObject)
{
try
{
required_page = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
required_page = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
required_page.onreadystatechange = function ()
{
loadPage(required_page, container_id);
}
required_page.open('GET', url, true); // assign open and send methods
required_page.send(null);
}
function loadPage(required_page, container_id)
{
if (required_page.readyState == 4 && (required_page.status == 200 || window.location.href.indexOf("http") == -1))
document.getElementById(container_id).innerHTML = required_page.responseText;
}
ajax('http://lujanventas.com/plugins/banner/index.php', 'banner-root');