Use JSONP to load an html page

Question

I'm trying to load an external page using JSONP, but the page is an HTML page, I just want to grab the contents of it using ajax.

EDIT: The reason why I'm doing this is because I want to pass all the user information ex: headers, ip, agent, when loading the page rather than my servers.

Is this doable? Right now, I can get the page, but jsonp attempts to parse the json, returning an error: Uncaught SyntaxError: Unexpected token <

Sample code:

$.post('http://example.com',function(data){
    $('.results').html(data);
},'jsonp');

I've set up a jsfiddle for people to test with: http://jsfiddle.net/8A63A/1/

score 17 · Accepted Answer · answered Sep 23 '11 at 16:55

http://en.wikipedia.org/wiki/JSONP#Script_element_injection

Making a JSONP call (in other words, to employ this usage pattern), requires a script element. Therefore, for each new JSONP request, the browser must add (or reuse) a new element—in other words, inject the element—into the HTML DOM, with the desired value for the "src" attribute. This element is then evaluated, the src URL is retrieved, and the response JSON is evaluated.

Now look at your error:

Uncaught SyntaxError: Unexpected token <

< is the first character of any html tag, probably this is the start of <DOCTYPE, in this case, which is, of course, invalid JavaScript.

And NO, you can't use JSONP for fetching html data.

If I'm able to retrieve the data, why am I not able to change how that data is interpreted? — Korvin Szanto, Sep 23 '11 at 17:01

score 12 · Answer 2 · answered Apr 29 '12 at 00:19

I have done what you want but in my case I have control of the server side code that returns the HTML. So, what I did was wrapped the HTML code in one of the Json properties of the returned object and used it at client side, something like:

callback({"page": "<html>...</html>"})

The Syntax error you are facing it's because the library you're using expects json but the response is HTML, just that.

score 2 · Answer 3 · answered Jun 30 '12 at 07:26

If you really just want to employ the client to snag an HTML file, I suggest using flyJSONP - which uses YQL.. or use jankyPOST which uses some sweet techniques:

jankyPOST creates a hidden iframe and stuffs it with a form (iframe[0].contentWindow.document.body.form.name).

Then it uses HTML5 (watch legacy browsers!) webMessaging API to post to the other iframe and sets iframe's form elements' vals to what u specified.

Submits form to remote server...done.

Or you could just use PHP curl, parse it, echo it, so on.

IDK if what exactly ur using it for but I hope this helps.

ALSO... I'm pretty sure you can JSONP anything that is an output from server code. I did this with ClientLogin by just JSONPing their keyGen page and successfully consoleLogged the text even though it was b/w tags. I had some other errors on that but point is that I scraped that output.

Currently, I'm trying to do what you are so I'll post back if successful.

score 2 · Answer 4 · answered Sep 23 '11 at 16:09

2

I've got three words for you: Same Origin Policy

Unless the remote URL actually supports proper JSONP requests, you won't be able to do what you're trying to. And that's a good thing.

Edit: You could of course try to proxy the request through your server …

answered Sep 23 '11 at 16:09

vzwick

11,008
5
43
63

4

is it a good thing? it's archaic and forces benevolent forces to use work arounds like JSONP. Instead of a universal ban on cross origin scripting, there should be something more fluid and dynamic, something like : Cross Origin Resource Sharing http://www.w3.org/TR/cors/ – jesse reiss Sep 23 '11 at 16:16
The fact that the page is being pulled says that it can be pulled without parsing as json. – Korvin Szanto Sep 23 '11 at 16:21
There sure are better alternatives. For the time being though, SOP prevents every script-kiddie-SQL-injection-pwned website you run across from posting "I just bought a penis pump, lololol" on your FB timeline. – vzwick Sep 23 '11 at 16:21
Korvin, what do you mean, the page is being pulled? – vzwick Sep 23 '11 at 16:23
It is very interesting, with a type of JSONP the page is fetched, the problem is that the response is not valid JSON hence the syntax Error. – aziz punjani Sep 23 '11 at 16:51

score 0 · Answer 5 · answered Sep 23 '11 at 16:14

I don't think this is possible. JSONP requires that the response is rendered properly.

If you want another solution, what about loading the url in an iframe and trying to talk through the iframe. I'm not 100% positive it will work, but it's worth a shot.

score -2 · Answer 6 · answered Sep 23 '11 at 16:07

-2

First, call the AJAX URL manually and see of the resulting HTML makes sense.

Second, you need to close your DIV in your fiddle example.

answered Sep 23 '11 at 16:07

Diodeus - James MacFarlane

112,730
33
157
176

4

Won't work because `Origin is not allowed by Access-Control-Allow-Origin`. – Korvin Szanto Sep 23 '11 at 16:09

Use JSONP to load an html page

6 Answers6

Linked

Related