0

I want to provide other sites with a banner from my site but I want to keep the banner on my server and have them include it with javascript, like Facebook plugins/google ads do.

The banner is hosted on site A. On site B I have this code:

<div id="bannerContainer"></div>
<script type="text/javascript" src="http://mysite.com/plugins/includebanner.js"></script>

includebanner.js does an AJAX call to get the banner and place it inside bannerContainer but I'm getting error:

Origin http://lventas.com is not allowed by Access-Control-Allow-Origin.

How do I allow all websites to include the banner? Are there other easy ways to include a banner hosted in site A from other site?

Edit:

This is the script that requests the content:

function ajax(url, id_contenedor)
{
    var pagina_requerida = false;
    if (window.XMLHttpRequest)
    {
        pagina_requerida = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        try 
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    } 
    else
    return false;
    pagina_requerida.onreadystatechange = function ()
    {
        cargarpagina (pagina_requerida, id_contenedor);
    }
    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
    pagina_requerida.send (null);
}
function cargarpagina (pagina_requerida, id_contenedor)
{
    if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
    document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}

ajax('http://lujanventas.com/plugins/banner/index.php', 'banner-root');
lisovaccaro
  • 32,502
  • 98
  • 258
  • 410

2 Answers2

0

It appears you are running into the normal JS cross-site scripting restrictions. By default cross-site scripting capabilities apply some restrictions on what and who can call the endpoint. You didn't provide any sample of what you are trying to do code wise but you can check out this link as an example: http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

EDIT:

It would help to see the JavaScript call itself but if you plugin the error to Google or Bing the first result for me was another SO post: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

Community
  • 1
  • 1
Brent Pabst
  • 1,156
  • 1
  • 15
  • 37
0

With javascript/jquery you can draw an iframe instead of a div, and set its src attribute to the url of your banner.

$('<iframe />', {
    name: 'myFrame',
    id:   'myFrame',
    src:  'http://www.mywebsite.com/'
}).appendTo('body');
iddo
  • 749
  • 3
  • 11
  • IFrames are not a good idea, why not solve the error the OP is having versus reverting to a legacy set of code to get around it? – Brent Pabst May 29 '12 at 16:09
  • There may be better ways like proxy reversing, but he's asking for an easy javascript solution, isn't he? Also it's common way of working around the x-domain restriction (Facebook button). – iddo May 29 '12 at 16:57
  • Sure, I just like to avoid iframes wherever possible and it appears this should work as they are trying to do but there may be an issue with the JS in general, but that code isn't provided. – Brent Pabst May 29 '12 at 17:00
  • I just added the code. I didn't think it necessary since it's a regular ajax call. – lisovaccaro May 29 '12 at 17:17