views:

277

answers:

5

currently i am relying on a proxy script to handle this problem of Single Origin Policy. it is slow, and creates overhead. Not to mention, javascript is not rendered.

is there a working alternative out there?

+4  A: 

If you can provide a callback name as a parameter to the service providing the JavaScript code in question, then you can append a script tag to your document, with a src attribute pointing to the service call. Otherwise, you're out of luck.

Jonathan Feinberg
This is commonly called JSONP - or JSON with Padding - even further: JavaScript Object Notation with Padding. :)
Alex Sexton
Note that in Internet Explorer, large scripts can cause memory leaks large memory usage that doesn't free up after removing the script tag. This isn't a major issue if you make only 1 or 2 calls on each page view, but if you're expecting a page to stay open and make calls over extended periods of time expect some complaints from users with extremely slowed computers :)
Andy E
A: 

Oh dear, I think the solution you're looking for is with IFRAMEs. However the iframe approach is both a mental and technical undertaking. I suggest you start with this guide:

Cross-Domain Communication with IFrames

The alternative approach is getting data from another server asynchronously using script tags and json:

<script src="http://remotesite.com/path/to/script/blah.js"&gt;&lt;/script&gt;

You can create a new SCRIPT tag element to pass and load data and append to DOM or insert the markup into an elements innerHTML.

I'm sure you can find some detailed examples and ways to implement but one thing you should keep a track of with the new SCRIPT method is adding so many tot he DOM. This might help and provide a starting point for you:

function require (url, callback) {
    if (!isScriptLoaded(url)) { 
     document.write('<script src="' + url + '" type="text/javascript" charset="utf-8"><\/script>');

     if (callback) {
      callback();
     }
    }
}

function isScriptLoaded(src) {
    var scriptsLoaded =  {};
    var scriptTags    = document.getElementsByTagName("script");

    for (var i = 0, script; script = scriptTags[i]; i++) {
     if (script.src) { 
      scriptsLoaded[script.src] = 1;
     }
    };

    if (scriptsLoaded[src]) {
     return true; 
    }

    return false;
}

(untested, but should work!)

Either way - best of luck.

michael
yes. iframe loads an external page, and some javascript needs to be run on it. however due to SINGLE ORIGINAL POLICY, this is not allowed. Hence, relying on proxy which is not optimal or efficient.
dooli
Sadly without specifics I can't properly reply to this. In my mind, this isn't an issue but my solution working depends on your backend setup etc.To follow your comment:- iframe loads external page- iframe URL can include params to indicate JS Callback and args- local iframe JS interprets this and continuesObviously this won't work if you're talking about some dynamic JS or a lot of values being passed...I have the impression that this doesn't help you as you have deeper needs but it might help others.
michael
A: 

JSON-P is pretty much ideal for this kind of thing. If you're using jQuery, or similar JavaScript libraries, your job is made even easier:

http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

Of course, it will depend on exactly what you are trying to do that will determine whether to use JSON-P, hidden iframes, postMessage, Flash proxies, or any other exotic solution.

Premasagar
+1  A: 

Use an iframe and try window.postMessage(message, origin) (it would be parent.postMessage from the iframe and iframeElement.contentWindow.postMessage from the top page) for all of the latest major browsers (Firefox, IE, Safari, Chrome, etc.) and changing/polling window.name for old browsers.

Eli Grey
A: 

If you control both domains and only care about Firefox 3.5+, you can use the XMLHttpRequest Object and set up permissions with Access Control.

epascarello