需求：在航海仪器模拟器中，有多个设备需要共享数据，设备在iframe中展示。

首先，了解一下frames的相关知识。在一个页面中，可以将window想象成树的主树干，而frames属性便是window的各个分支。
在主树干上，如果我们想访问这些分支，可以通过window.frames来访问。访问的方式有六种：
1.window.frames[0]
2.window.frames[‘gps’]
3.top.frames[0]
4.top.frames[‘gps’]
5.frames[0]
6.frames[‘gps’]
而在分支上想访问主树干的时候，就可以利用parent属性来访问。
这便是最基础的一些知识了。

下面看看demo
可以看到，本船数据是要跟gps进行数据共享的，而且在本船和gps进行数据修改的时候，本船的经纬度数据始终是需要set的。在这里为了简化代码，引入了backbone框架来演示。

//本船

var GPSModel = Backbone.Model.extend({
    initialize: function() {
        console.log('gps is ready');
    },
    defaults: {
        lat: 23.45,
        lon: 118.23,
        sog: 20,
        cog: 90
    }
});

var gps = new GPSModel;

//设置本船经纬度
document.getElementById('own-ship-set').addEventListener('click', function(){
    gps.set({'lat': document.getElementById('own-ship-lat').value,
        'lon':  document.getElementById('own-ship-lon').value });
}, false);

//监听本船经纬度
gps.on('change', function() {
    document.getElementById('own-ship-lat').value = gps.get('lat');
    document.getElementById('own-ship-lon').value = gps.get('lon');
});

//GPS

(function() {
    //获取经纬度
    var lat = parent.gps.get('lat');
    var lon = parent.gps.get('lon');

    var inputLat = document.getElementById('gps-lat');
    var inputLon = document.getElementById('gps-lon');
    var gpsSet = document.getElementById('gps-set');

    inputLat.value = lat;
    inputLon.value = lon;

    //设置本船经纬度
    gpsSet.addEventListener('click', function() {
        parent.gps.set({'lat': inputLat.value, 'lon': inputLon.value})
    }, false);

    //监听本船经纬度
    parent.gps.on('change', function() {
        document.getElementById('gps-lat').value = parent.gps.get('lat');
        document.getElementById('gps-lon').value = parent.gps.get('lon');
    });
})();