javascript - 怎么抓取中国气象局该站下的某张图并实时更新

Question

想拿到中国气象台网站上的这张降水量预报图，而且可以随官网在某个时间动态更新，请问该怎么抓取到？

Answer 1

这是网页里的源码

<p id="map_show"> 
        <p id="item"> 
         <ul> 
          <li class="item_select"><span>降水预报</span></li> 
          <li class="item_not_select"><span>霾预警</span></li> 
          <li class="item_not_select"><span>环境气象</span></li> 
          <li class="item_not_select"><span>云图</span></li> 
         </ul> 
        </p> 
        <p id="map_img"> 
         <a href="/publish/precipitation/1-day.html" target="_blank" style="display: inline;"><img class="imgs" alt="" src="http://image.nmc.cn/product/2016/12/16/STFC/small/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20161216010002400.JPG?v=1481842484880"></a> 
         <a href="/publish/country/warning/haze.html" target="_blank" style="display: none;"><img class="imgs" alt="" src="http://image.nmc.cn/product/2016/12/16/IMAT/small/SEVP_NMC_IMAT_SFER_EHZA_ACHN_L88_P9_20161215220002400_XML_1.jpg?v=1481838768880"></a> 
         <a href="/publish/environment/air_pollution-24.html" target="_blank" style="display: none;"><img class="imgs" alt="" src="http://image.nmc.cn/product/2016/12/16/APWF/small/SEVP_NMC_APWF_SFER_EAIRP_ACHN_LNO_P9_20161216000002424.JPG?v=1481843702067"></a> 
         <a href="/publish/satellite/fy2.htm" target="_blank" style="display: none;"><img class="imgs" alt="" src="http://image.nmc.cn/product/2016/12/16/WXCL/small/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20161216004500000.JPG?v=1481849348432"></a> 
        </p> 
       </p>

你所需要的图片可以通过上文img元素src路径获取到。

$('#map_img .imgs').attr('src')

动态更新的话，就只能定时轮询网页，发现该src变化时，更新自己的图片了。

Answer 2

定时去下载图，然后比对一下是否有变化

Answer 3

你要拿到人家网站的后台数据？额...我怎么觉得这有点不现实？除非它是开源出来的，就像百度api那样的，不然的话你应该是拿不到的吧？毕竟后台数据都有保护机制。不过你这需求确实比较厉害，不知道这样子行不行，你直接在页面上一个iframe，直接显示那个气象台页面可以不可以？

Answer 4

这个界面看着有点眼熟

Answer 5

上文应该都不行，因为通过iframe试图取到跨越网站里面的某个元素是不可能的，这是跨越，浏览器会报错的，
有个很烂的的方法，用setInterval()实时刷新iframe(其src为气象官网)，如果只想显示其中的某个图片，可以对iframe绝对定位，并用p遮盖住不需要看到的部分,但是每次iframe刷新的时候就会闪动.....

Answer 6

有没有可能自己拼接图片链接，然后直接用链接下载图片。

发现这个网站的图片貌似是每隔几个小时定时更新的，图片的链接也是和时间有关系的。

Answer 7

我只想说，除了 @vastness 其他人都在说什么？

Answer 8

你本地记录获取图片连接的时间跟图片地址，然后设置一个频率去拿链接，不用你设置定时器。
就是有人访问的时候就后台服务器判断(system-getSrcTime) > 1一小时，就去拿新连接，被动更新