使用JSONP加载html页面

时间:2011-09-23 16:05:18

标签: javascript jquery ajax jsonp

我正在尝试使用JSONP加载外部页面,但该页面是HTML页面,我只想使用ajax获取它的内容。

编辑:我这样做的原因是因为我想在加载页面而不是我的服务器时传递所有用户信息ex:headers,ip,agent。

这可行吗?现在,我可以获取页面,但jsonp尝试解析json,返回错误:Uncaught SyntaxError: Unexpected token <

示例代码:

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

我已经设置了一个供人们测试的jsfiddle: http://jsfiddle.net/8A63A/1/

6 个答案:

答案 0 :(得分:15)

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

  

进行JSONP调用(换句话说,使用此使用模式),   需要一个脚本元素。因此,对于每个新的JSONP请求,   浏览器必须添加(或重用)一个新元素 - 换句话说,   将元素注入到HTML DOM中,并使用所需的值   “src”属性。然后评估此元素,src URL为   检索,并评估响应JSON。

现在看看你的错误:

  

未捕获的SyntaxError:意外的标记&lt;

<是任何html标记的第一个字符,可能这是<DOCTYPE的开头,在这种情况下,当然是,JavaScript无效。< / p>

NO ,您无法使用JSONP获取HTML数据。

答案 1 :(得分:12)

我已经做了你想要的但是在我的情况下我控制了返回HTML的服务器端代码。 所以,我所做的是将HTML代码包装在返回对象的一个​​Json属性中,并在客户端使用它,如:

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

你面临的语法错误是因为你正在使用的库需要json,但响应是HTML,就是这样。

答案 2 :(得分:2)

我有三个字给你:Same Origin Policy

除非远程URL实际上支持正确的JSONP请求,否则您将无法执行您尝试的操作。这是一件好事。

编辑:您当然可以尝试通过您的服务器代理请求...

答案 3 :(得分:2)

如果您真的只想使用客户端来获取HTML文件,我建议使用flyJSONP - 它使用YQL ..或使用jankyPOST使用一些甜蜜的技巧:

jankyPOST创建一个隐藏的iframe,并用表单填充它(iframe [0] .contentWindow.document.body.form.name)。

然后它使用HTML5(观看旧版浏览器!)webMessaging API发布到其他iframe,并将iframe的表单元素的val设置为您指定的值。

将表单提交给远程服务器...完成。

或者你可以使用PHP curl,解析它,回应它,等等。

IDK,如果您正在使用它,但我希望这会有所帮助。

... ALSO 我很确定你可以JSONP任何来自服务器代码的输出。我通过JSONPing他们的keyGen页面使用ClientLogin做了这个,并且成功地控制了文本,即使它是b / w标签。我还有其他一些错误,但重点是我删除了那个输出。

目前,我正在努力做你想做的事情,所以如果成功的话,我会回复。

答案 4 :(得分:0)

我不认为这是可能的。 JSONP要求正确呈现响应。

如果您想要其他解决方案,请在iframe中加载网址并尝试通过iframe进行通话。我不是100%肯定它会起作用,但它值得一试。

答案 5 :(得分:-2)

首先,手动调用AJAX URL,看看生成的HTML是否合理。

其次,你需要在你的小提琴示例中关闭你的DIV。