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

我需要在我的Vue.js应用程序中集成一些在图表平台上创建的iFrame。响应iframe的代码由一些html代码和一些javascript组成，它们位于一对脚本标记之间

以下是html部分：

javascript部分：

if（“undefined”==typeof window.datawrapper）window.datawrapper={}；
window.datawrapper[“8dfPN”]={}，
window.datawrapper[“8dfPN”].EmbeddeDelta={“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”，函数（a）{if（“undefined”！=typeof a.data[“datawrapper height”]）for（a.data中的变量b[“datawrapper height”]）if（“8dfPN”==b）window.datawrapper[“8dfPN”].iframe.style.height=a.data[“datawrapper height”][b]+“px”}）；

我不明白如何管理这段代码。如果我把它放在模板中（因为它有html元素），视图会告诉我不能在模板中使用脚本。但是将代码嵌入到我的Vue文件的部分也不起作用。我试着去除这些元素。但它不起作用

---

有没有办法重构这段代码，这样我就可以在Vue.js中充分使用它

如果你看一下提供的JavaScript，其实没有太多内容。它设置一个初始高度，然后设置一个事件侦听器来管理iframe的高度

首先，我们将

height

绑定到数据属性

iframehight

<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>

---

如果你看一下提供的JavaScript，其实没有什么大不了的。它设置一个初始高度，然后设置一个事件侦听器来管理iframe的高度

首先，我们将

height

绑定到数据属性

iframehight

<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>

---

太好了！谢谢你的帮助。我在vue文件中添加了代码，是的，不再阻塞。现在我得走得更远一点。iframe通过选择窗体有选择地显示，每个选项通过iframe链接到每个div中的条件。当用户在菜单中选择该选项时，将显示div（仅此一个）。由于我有十几个iframe，我需要找到一种方法来重构iframe，并用不同部分（计算、装载、方法等）中的变量替换iframe Id。你知道我怎么做吗？@Plouf使用一组对象来跟踪iFrame。在每个对象中放置URL、标识符和iframeHeight。select可以跟踪要显示的索引并应用iframeHeight。然后使用

v-for

在数组上循环并生成html。看来在你的帮助下，我现在有了一个完整的解决方案！太好了！谢谢你的帮助。我在vue文件中添加了代码，是的，不再阻塞。现在我得走得更远一点。iframe通过选择窗体有选择地显示，每个选项通过iframe链接到每个div中的条件。当用户在菜单中选择该选项时，将显示div（仅此一个）。由于我有十几个iframe，我需要找到一种方法来重构iframe，并用不同部分（计算、装载、方法等）中的变量替换iframe Id。你知道我怎么做吗？@Plouf使用一组对象来跟踪iFrame。在每个对象中放置URL、标识符和iframeHeight。select可以跟踪要显示的索引并应用iframeHeight。然后使用

v-for

在数组上循环并生成html。看来在你的帮助下，我现在有了一个完整的解决方案！