Js 获取客户端IP地址、城市信息

方法：通过 jsonp 方式 调用 搜狐 接口。适用于所有的平台和浏览器。

jsonp 来处理跨域问题：动态创建 <script> 标签的 src 来调用服务端js脚本。

function fetchIP() {
    try { // JSONP 请求跨域资源
        var url = "https://pv.sohu.com/cityjson";
        var new_scirpt = document.createElement('script');
        new_scirpt.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(new_scirpt); 
    } catch(e) {
        console.log("创建script失败");
    }

    // 
    new_scirpt.onload = new_scirpt.onreadystatechange = function() {
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
            localStorage.setItem('CitySN', JSON.stringify(returnCitySN));
            document.getElementsByTagName('head')[0].remove(new_scirpt); 
        }
    }
  }

知识点讲解：

1、看下如何使用 <script src="https://pv.sohu.com/cityjson?callback=showData">来完成一个跨域请求：

添加一个<script>标签，用于发起跨域请求；如果请求地址后面带了一个callback=showData的参数。 　showData 即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

如果 请求地址后面没有 接参数，回调函数默认属于window对象。

2、script元素的onload、onreadystatechange事件

• IE的 script 元素支持onreadystatechange事件，不支持onload事件。

• FF的 script 元素不支持onreadystatechange事件，只支持onload事件。

如果要在一个< script src="xx.js"> 加载完成执行一个操作，FF使用onload事件就行了，IE下则要结合onreadystatechange事件和this.readyState，this.readyState的值为loaded或者complete都可以表示这个script已经加载完成。

如何结合IE和FF的区别?参考一下jquery的源码：

var script = document_createElement_x('script');
script.src="xx.js";

// !this.readyStateIE 这是FF的判断语句，因为FF下没有readyState这人值，IE的readyState肯定有值
// this.readyState=='loaded' || this.readyState=='complete' 这是IE的判断语句
script.onload = script.onreadystatechange = function(){
     if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
        alert('loaded');
    }
};