JSONP：显示不了数据问题

2015-10-09 10:35:59 202 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

JSONP原理以及安全问题 JSONP介绍 JSONP全称是JSON with Padding ，是基于JSON格式的为解决跨域请求资源而产生的解决方案。他实现的基本原理是利用了 HTML 里元素标签没有跨域限制 JSONP原理就是动态插入带有跨域url的script标签，然后调用回调函数，把我们需要的json数据作为参数传入，通过一些逻辑把数据显示在页面上。比如如下代码所示，通过script标签完成http://loc... 阅读详情

测试 JSONP 跨域获取数据，发现在 console 里面可以看到远程数据，但在 HTML 里面无法显示。
很奇怪的一个问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DEMO</title>

</head>

<body>

    <div id="data" class="box"></div>

    <script>

        (function() {

            var data = document.getElementById("data");

            data.innerHTML = "placeholder";



            function getJSONP(info) {

                console.log(info);

                console.log(info.city);

                data.innerHTML = info;

            }



            var script = document.createElement("script");

            script.src = "http://freegeoip.net/json/?callback=getJSONP";

            document.body.appendChild(script);

        })();

    </script>

</body>

</html>