在Vue中应用中国天气网插件

无意间访问到中国天气网,网站提供自定义的插件内容,获得代码如下:

<!-- weather_plugin -->
<script type="text/javascript">
	WIDGET = {FID: 'xxxxxxxxxx'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

内容很简单,但不知道该如何使用。多次尝试都是各种错误,经过一番研究,终于找到解决办法。
首先,查看上面地址内的js内容

(function (d) {
  var a = d.getElementById('weather-float-he')
  if (a) {
    a.parentNode.removeChild(a)
  }
  a = d.createElement('div')
  a.id = 'weather-float-he'
  var b = d.getElementsByTagName('body')[0]
  b.appendChild(a);
  var c = d.createElement('link')
  c.rel = 'stylesheet'
  c.href = 'https://apip.weatherdt.com/float/static/css/tqw_widget_float.css?v=0101'
  var s = d.createElement('script')
  s.src = 'https://apip.weatherdt.com/float/static/js/tqw_widget_float.js?v=0101'
  var sn = d.getElementsByTagName('script')[0]
  sn.parentNode.insertBefore(c, sn)
  sn.parentNode.insertBefore(s, sn)
})(document)

发现WIDGET的使用,是通过js的自运行,插入了远程的widget.jswidget.css
其中不包含 WIDGET = {FID: ‘xxxxxxxxxx’},虽然不知道其中的运行原理,但想到一个办法,就是将这句script也插入进去
所以在变量s.src后面加入

  var w = d.createElement('script')
  w.type = 'text/javascript'
  w.innerHTML = 'WIDGET = {FID: "xxxxxxxxxx"}'
  ......
  sn.parentNode.insertBefore(w, sn) //在最后一句加入这条,将w插入

这样就能实现效果了。

你可能感兴趣的:(Javascript,Vue3.0)