cross-domain ajax to foreign domain with pure JS and html - javascript

First of all - I have read teens of SO similar questions and other googled pages / blogs.
There was many ways to make cross-domain communication work, but is there something that lets me do that, when I'm unable to modify page (for example http://www.imdbapi.com/?t=True%20Grit&y=1969 ) that I want call?
Can I use postMessage solution (this method looked best to me) without ANY modification in http://www.imdbapi.com/?t=True%20Grit&y=1969 ? It looks like it has no helper page (one of the methods).
I don't want to use any 3rd party library / php script / etc - just pure html and javascript - is it possible to call such a 'immutable' page? ... and parse it on my own page (simple iframe is ofc not enough)
Please help - my huge research leave me with nothing

ok, here's the thing. what that did is requested data from the same domain. inter-subdomain and subdomain-domain requests are not "same domain", just to make things clear. Since that page was "same-domain", it was possible without a helper.
AJAX does not allow cross-domain requests. as far as i know, there are methods that allow cross-domain requests (such as helper pages)
currently, jsonp is supported by jQuery and you can do it like this:
http://api.jquery.com/jQuery.getJSON/
look for in the page: "Loads the four most recent cat pictures from the Flickr JSONP API."
or see reference:
http://en.wikipedia.org/wiki/JSONP

Theoretically you'll need a proxy iframe with the same domain where the ajax page lies.
postMessage from parent page to iframe page.
And then ajax from iframe.
If you dont have access to the parent page's source code, you can inject your script via a bookmarklet or so. Injection can also include jquery and the postMessage plugin along with your script that creates an iframe.
I'm using this postMessage plugin and it works on latest IE/FF/Chrome/Safari with HTML5. It claims to have URL #ing fallback for older browsers but I haven't tested yet.
http://benalman.com/projects/jquery-postmessage-plugin/

Related

Is there any alternative to iframe, object or embed?

I want to include an external (external domain) html page into my page. For SEO reasons iframe, object or embed are not useful, there are just a link in my source file. PHP's include function is very helpful but it causes many problems for UI. I want contents of include function and view of iframe.
How can I do that?
Thanks.
There's no reasonable alternative to <iframe>.
Who knows if you could extract the markup from the site from the server-side and print that HTML inside a <div> in your own site, but I doubt that this could ever work, because if the whole target site does AJAX requests, WebSockets or whatever, it should be secure enough to block you from performing them from other domains than allowed ones by themselves (i.e. their official domains).
If you are adding content from an external source the it should really have 0 impact on your SEO. Needs to be your own content as far as I am aware. You could try scraping the external source and using Ajax add it to your page using $().load() or similar... Wouldn't recommend though!

Can I grab specific page HTML code from another webpage through Javascript?

I've read about how there are multiple methods to grabbing source code from another webpage via jQuery or using Cross-Domain Requests. What I want to try and do is make it so I grab a div that has different code each time a page is loaded and not the source code as a whole. So for example, the greater detail you see when you use 'inspect element' or a tool like firebug to dive deeper into the page code.
Would I be using one of the same methods?
Yes.
If you control BOTH domains you can add the Access_control_CORS
header to allow access of cross domain requests and use a
headless browser like phantomJS to grab a cached version of
rendered HTML page.
If you don't control both domains you will have to write a server
side proxy to grab the page and all its resources (you will have
to parse the page to get or rewrite links to images, javascripts,
stylesheets etc...) then run it through phantomJS to create a
HTML snapshot.`
source:
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
http://phantomjs.org/
NOTE: despite my best efforts, stack overflow is absolutely convinced these links are code. Sorry for posting as code.

ideas/hacks for using javascript inside an iframe with remote content

I'm trying to throw together a proof of concept in rails where I want to put a remote sites content inside and iframe and then use jQuery to modify the content in the iframe. I know that I can't really do this because of cross site scripting protections and I also know it's not a great design; it's just a hack as a proof of concept. But, is there anyway to scrape the html from the remote site and pipe that into the iframe?
Thanks!
In short answer you can't do this.
However, you can try some crazy solution like download remote page using wget and then link file to the iframe. But then the page is not really in different domain.
BTW, you may want to have a look at https://developer.mozilla.org/en/DOM/window.postMessage maybe it will be helpful in some cases for you.

How to offer a webapp to other sites. (div with javascript, iframe or..?)

I am quite new to web application development and I need to know how would I make other sites use it.
My webapp basically gets a username and returns some data from my DB. This should be visible from other websites.
My options are:
iframe. The websites owners embed an iframe and they pass the userid in the querystring. I render a webpage with the data and is shown inside the iframe.
pros: easy to do, working already.
cons: the websites wont know the data returned, and they may like to know it.
javascript & div. They paste a div and some javascript code in their websites and the div content is updated with the data retrieved by the small javascript.
pros: the webside would be able to get the data.
cons: I could mess up with their website and I don't know wow would I run the javascript code appart from being triggered by a document ready, but I wouldn't like to add jquery libraries to their sites.
There must be better ways to integrate web applications than what I'm thinking. Could someone give me some advice?
Thanks
Iframes cannot communicate with pages that are on a different domain. If you want to inject content into someone else's page and still be able to interact with that page you need to include (or append) a JavaScript tag (that points to your code) to the hosting page, then use JavaScript to write your content into the hosting page.
Context Framework contains embedded mode support, where page components can be injected to other pages via Javascript. It does depend on jQuery but it can always be used in noConflict-mode. At current release the embedded pages must be on same domain so that same-origin-policy is not violated.
In the next release, embedded mode can be extended to use JSONP which enables embedding pages everywhere.
If what you really want is to expose the data, but not the visual content, then I'd consider exposing your data via JSONP. There are caveats to this approach, but it could work for you. There was an answer here a couple of days ago about using a Web Service, but this won't work directly from the client because of the browser's Same Origin policy. It's a shame that the poster of that answer deleted it rather than leave it here as he inadvertently highlighted some of the misconceptions about how browsers access remote content.

implement a callback between two sites - communicating between two sites

I have a web app in http://domain1/app1/called.html, and I want to embed that application inside http://domain2/app2/caller.html with an iframe (or a popup, it's the same)
the user should be able to interact with called.html, until they press a certain button, in that case I need to tell caller.html that the user selected an item from called.html
I tried implementing it with javascript.
in called.html I encode the data in json, and then I execute a "called_callback" javascript function in caller.html, passing the json as a parameter.
if called.html was called with a popup, I issue window.opener.called_callback( jsonData ), if it's an iframe I just issue parent.called_callback( jsonData )
having caller.html and called.html in the same domain everything works fine, but from different domains I get the following errors:
permission denied (on IE6)
and
Unsafe JavaScript attempt to access frame with URL [..]/caller.html from frame with URL [...]called.html. Domains, protocols and ports must match. (on google chrome)
Is it possible to overcome this limitation?
What other way of achieving it can you think of???
I guess caller.html could implement a web service, and I could send the result calling it, but the page caller.html would have to poll in order to detect any change...
So how can one application communicate with another one in a different domain to signal an event???
You can use JSONP to call resources from one domain to another.
You can use window.name as ~2Mb text transfer between cross domain frames for older browser.
Or for modern browser you can use window.postMessage to communicate string data between the 2 frames.
But you need some cooperation from the domains for these techniques to work.
You should look into using JSONP. It is fully supported in jQuery if you are using that particular framework. It allows you to use JSON across domains.
Thanks to both answer I found the following:
http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
http://benalman.com/projects/jquery-postmessage-plugin/
jQuery postMessage enables simple and
easy window.postMessage communication
in browsers that support it (FF3,
Safari 4, IE8), while falling back to
a document.location.hash communication
method for all other browsers (IE6,
IE7, Opera).
With the addition of the
window.postMessage method, JavaScript
finally has a fantastic means for
cross-domain frame communication.
Unfortunately, this method isn’t
supported in all browsers. One example
where this plugin is useful is when a
child Iframe needs to tell its parent
that its contents have resized.
I'll have a look at it...
here's a very complete document that analizes the different approaches...
http://softwareas.com/cross-domain-communication-with-iframes
another solution to have a look at
http://easyxdm.net/
with a sample
http://easyxdm.net/wp/2010/03/17/setting-up-your-first-socket/

Categories