在 Vue.js 中插入响应式 iframe 的 javascript 代码

Question

I need to integrate some iframes created on a chart platform in my Vue.js app. The code for the responsive iframe is composed of some html code, that I put in the template and some javascript that comes between a pair of script tags.

Here is the html part:

<iframe
  id="datawrapper-chart-8dfPN"
  src="//datawrapper.dwcdn.net/8dfPN/4/"
  scrolling="no"
  frameborder="0"
  allowtransparency="true"
  style="width: 0; min-width: 100% !important;" height="400"
>
</iframe>

and the javascript part:

<script type="text/javascript">
  if("undefined"==typeof window.datawrapper)window.datawrapper={};
  window.datawrapper["8dfPN"]={},
  window.datawrapper["8dfPN"].embedDeltas={"100":481,"200":427,"300":400,"400":400,"500":400,"700":400,"800":400,"900":400,"1000":400},
  window.datawrapper["8dfPN"].iframe=document.getElementById("datawrapper-chart-8dfPN"),
  window.datawrapper["8dfPN"].iframe.style.height=window.datawrapper["8dfPN"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["8dfPN"].iframe.offsetWidth/100),100))]+"px",
  window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("8dfPN"==b)window.datawrapper["8dfPN"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});
</script> 

I don't understand how I have to manage this code. If I put it in the template (as it has html elements) Views tells me I can't use scripts in templates. But embed the code in the portion of my Vue file doesn't work either. I tried to get rid of the elements. But it's not working.

Is there a way to refactor this code so I can fully use it with Vue.js?

Answer 1

If you look at the provided JavaScript, there really isn't much to it. It's setting an initial height and then setting up an event listener to manage the iframe's height.

To start we'll bind the height to a data property iframeHeight .

<iframe
  ref="chartiframe"
  id="datawrapper-chart-8dfPN" 
  src="//datawrapper.dwcdn.net/8dfPN/4/"
  scrolling="no"
  frameborder="0"
  allowtransparency="true"
  style="width: 0; min-width: 100% !important;"
  :height="iframeHeight"></iframe>

Then

1. Create const variable for the embeddedDeltas
2. Set the initial height in the mounted hook.
3. Setup the message event listener in the mounted hook
4. Create a method to handle the resize
5. Remove the event listener in the beforeDestroy hook

ddd

const DELTAS = {
        "100":481,
        "200":427,
        "300":400,
        "400":400,
        "500":400,
        "700":400,
        "800":400,
        "900":400,
        "1000":400,
};

export default {
  data() {
    return {
      iframeHeight: '0px', // initial height
    };
  },
  computed: {
    // Necessary for initial iframe height
    iframeOffsetWidth() {      
      return this.$refs['chartiframe'].offsetWidth;
    },
  },
  mounted() {
    // set initial iframe height
    this.iframeHeight = `{DELTAS[Math.min(1e3,Math.max(100*Math.floor(this.iframeOffsetWidth/100),100))]}px`;
    // setup event listener
    window.addEventListener('message', this.handleIframeResize);
  },
  beforeDestroy() {
    // destroy event listener
    window.removeEventListener('message', this.handleIframeResize);
  },
  methods: {
    handleIframeResize(e) {
      for(var b in e.data['datawrapper-height']) {
        if ('8dfPN' === b) {
          this.iframeHeight = `${e.data['datawrapper-height'][b]}px`;
        }
      }
    },
  },
};