Search jQuery

jQuery Forum

Screen name:
leods92

leods92's Profile

1 Posts

2 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

How can I use a parent-frame jQuery objected to make child-frame AJAX?
[4Replies]
- 26-Aug-2011 05:58 PM
- Forum: Using jQuery
I have a domain: example.com; which is the parent.
And a subdomain: api.example.com; which page 'receiver.html' is being loaded in an iframe, child of parent.
Both pages set document.domain = example.com.

I'm trying to adapt this code: https://gist.github.com/859940 but I don't want to load jQuery from the <iframe> again but I need to have the method $.ajax() working from the <iframe> otherwise it would be a cross-domain request and the browser would abort it. I tried ingenuously to set via $('iframe')[0].contentWindow.$.ajax = $.ajax() and I just got a shortcut to the parent page jQuery method. I also tried to "clone" it using $.expand (true...) but the method doesn't work for me; probably because of the complexity of the objected I'm trying to clone. So is there a way for me to use jQuery to have only a $.ajax() method in the <iframe> ? I've thought even about creating a XHR in the child-iframe and then use that in the $.ajaxSetup ({xhr: THATNEWXHR}) but I couldn't do it. I mean, I want to use the XHR factory from jQuery (which has fallbacks for IE, etc) but it has to be created from the iframe-child.

Maybe there is other way to make the AJAX call come from the child-iframe, could you guys help me?

Little Extra:
If you're wondering "why don't you load jQuery from <script> in the child-iframe", there is a reason... As I'm using jQuery plugins + my own custom javascripts + other independent scripts I created a compiler which minifies each file and bundle them in one. The advantage of this is the reduction of HTTP requests. So "why don't you load that bundle inside the child-iframe?", because it's ugly and Twitter doesn't... Yeah, I like to take Twitter as a reference and I think if they were able to make it so can I; would you help me achieving that? :D Thank you!

--
Update:

I got to work in most browsers except IE and Opera by doing it with pure javascript.

Could you help me with IE and Opera?
I'm "attaching" the code for you guys to test. If you open it with Chrome, Safari or Firefox you will receive 2 alerts one with the return of $.get() and another with the return of a request made via XMLHttpsRequest object. Otherwise (if you open it with IE or Opera) you'll get 'undefined' in the first alert but the real return in the second.

This is the example.com/index.htm:
2. <html>
3. <head>
4. <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
5. <script>
6. document.domain = 'example.com';
8. $(document).ready(function () {
10. var iframe =
11. $('<iframe>')
12. .attr('src','http://api.example.com/receiver.html')
13. .load (loadIt)
14. .prependTo($('body'))
15. [0];
17. function loadIt () {
19. var gate = $('iframe')[0].contentWindow;
22. /* Works in Chrome , Safari 5.1 and Firefox 5 */
23. // XHR factory (based on jQuery 1.6.2)
24. gate.createStandardXHR = function () {try {return new gate.XMLHttpRequest();} catch( e ) {}}
25. gate.createActiveXHR = function () {try {return new gate.ActiveXObject( "Microsoft.XMLHTTP" );} catch( e ) {}}
26. gate.createXHR = window.ActiveXObject ? function() {return !this.isLocal && gate.createStandardXHR() || gate.createActiveXHR();} : gate.createStandardXHR;
28. $.ajaxSetup ({xhr: gate.createXHR});
30. $(document).ajaxComplete (function(e, xhr){
31. alert(xhr.responseText);
32. });
34. $.get ("http://api.example.com/method.json");
38. /* The following works in all browsers */
39. gate = $('iframe')[0].contentWindow;
40. gate.xhr = gate.createXHR();
42. gate.xhr.open("GET", "http://api.example.com/method.json");
43. gate.xhr.onreadystatechange = function() {
44. if (gate.xhr.readyState == 4) {
45. alert(gate.xhr.responseText);
46. }
47. }
48. gate.xhr.send(null)
50. }
52. });
53. </script>
54. </head>
56. <body>
57. </body>
59. </html>
The api.example.com/receiver.html
1. <html>
2. <head>
3. <script>document.domain = 'example.com'</script>
4. </head>
5. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend