Javascript 使用 JSONP 加载 html 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7531823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use JSONP to load an html page
提问by Korvin Szanto
I'm trying to load an external page using JSONP, but the page is an HTMLpage, I just want to grab the contents of it using ajax.
我正在尝试使用 加载外部页面JSONP，但该页面是一个HTML页面，我只想使用 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.
编辑：我这样做的原因是因为我想在加载页面而不是我的服务器时传递所有用户信息，例如：标头、ip、代理。
Is this doable? Right now, I can get the page, but jsonp attempts to parse the json, returning an error: Uncaught SyntaxError: Unexpected token <
这是可行的吗？现在，我可以获取页面，但是 jsonp 尝试解析 json，返回错误：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/
我已经设置了一个 jsfiddle 供人们测试：http: //jsfiddle.net/8A63A/1/
采纳答案by c69
http://en.wikipedia.org/wiki/JSONP#Script_element_injection
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.
进行 JSONP 调用（换句话说，使用这种使用模式）需要一个脚本元素。因此，对于每个新的 JSONP 请求，浏览器必须添加（或重用）一个新元素——换句话说，将元素注入到 HTML DOM 中，“src”属性具有所需的值。然后评估此元素，检索 src URL，并评估响应 JSON。
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.
<是任何 html 标签的第一个字符，可能这是 的开头<DOCTYPE，在这种情况下，当然是无效的 JavaScript。
And NO, you can't use JSONP for fetching html data.
和NO，你不能使用JSONP用于读取HTML数据。
回答by martosoler
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:
我已经完成了您想要的操作，但就我而言，我可以控制返回 HTML 的服务器端代码。所以，我所做的是将 HTML 代码包装在返回对象的 Json 属性之一中，并在客户端使用它，例如：
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.
您面临的语法错误是因为您使用的库需要 json 但响应是 HTML，仅此而已。
回答by Cody
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:
如果您真的只想使用客户端来获取 HTML 文件，我建议使用 flyJSONP - 它使用 YQL .. 或使用使用一些甜蜜技术的 jankyPOST：
jankyPOST creates a hidden iframe and stuffs it with a form (iframe[0].contentWindow.document.body.form.name).
jankyPOST 创建一个隐藏的 iframe 并用一个表单 (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.
然后它使用 HTML5（观看旧浏览器！）webMessaging API 发布到另一个 iframe 并将 iframe 的表单元素的 val 设置为您指定的值。
Submits form to remote server...done.
将表单提交到远程服务器...完成。
Or you could just use PHP curl, parse it, echo it, so on.
或者你可以只使用 PHP curl，解析它，回应它，等等。
IDK if what exactly ur using it for but I hope this helps.
IDK 如果你用它来做什么，但我希望这会有所帮助。
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.
还...我很确定您可以对服务器代码输出的任何内容进行 JSONP 处理。我使用 ClientLogin 通过 JSONPing 他们的 keyGen 页面做到了这一点，并成功通过控制台记录了文本，即使它是黑白标签。我对此有一些其他错误，但重点是我刮掉了那个输出。
Currently, I'm trying to do what you are so I'll post back if successful.
目前，我正在尝试做你想做的事情，所以如果成功，我会回帖。
回答by vzwick
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.
除非远程 URL 实际上支持正确的 JSONP 请求，否则您将无法执行您想要执行的操作。这是一件好事。
Edit: You could of course try to proxy the request through your server …
编辑：您当然可以尝试通过您的服务器代理请求......
回答by jesse reiss
I don't think this is possible. JSONP requires that the response is rendered properly.
我不认为这是可能的。JSONP 要求正确呈现响应。
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.
如果您想要其他解决方案，那么如何在 iframe 中加载 url 并尝试通过 iframe 进行对话。我不是 100% 肯定它会起作用，但值得一试。
回答by Diodeus - James MacFarlane
First, call the AJAX URL manually and see of the resulting HTML makes sense.
首先，手动调用 AJAX URL 并查看生成的 HTML 是有意义的。
Second, you need to close your DIV in your fiddle example.
其次，您需要在小提琴示例中关闭 DIV。
