需求:在航海仪器模拟器中,有多个设备需要共享数据,设备在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'); }); })();