Vue 渲染带script标签的内容

Vue 渲染带script标签的内容

目录

• 一、问题

• 二、解决方案

• 三、回顾解题思路

• 四、反思总结

• 五、科普时间

一、问题

简述需求：后端返回一个带有<script> 标签的字符串，前端去展示，项目前端架构为vue2，尝试使用v-html，but v-html不支持script标签，会令其失效

ps:我实际的业务需求比这个复杂点：渲染一个动态内容的流程图，后端返回一个内容为html的字符串（类似富文本），这个内容中的script 包含一些方法、有引用我项目的其他js文件 、css文件、图片等内容

二、解决方案

不多逼逼直接上我的解决方案。

  <template>
  ...
    <iframe id="processImg" width="100%" height="500" />
  ...
  </template>
 
 <script>
 // 从后端请求中拿到目标字符串 str，动态的写到 iframe 中
    const iframe = document.getElementById('processImg')
    const iframedoc = iframe.contentDocument || iframe.contentWindow.document
    iframedoc.write(str)
 ...
 </script>
      
      // innerHtml,append,srcdoc,
      
  vue-append

三、回顾解题思路

解题思路-主要记录心路历程

1. 首先很自然的尝试使用v-html标签，发现不能识别script标签里的内容（ps: 给自己填了个坑，以前都不知道还有这限制，我说我是彩笔谁反对！）

2. 考虑使用iframe，因为考虑到我渲染的内容，使用iframe更合理写，但是查看文档发现iframe似乎无法直接渲染这种内容的字符串，放弃（ps: 自己坑自己，根本没想到动态写入…）

3. 遇事不决就百度，发现目标插件vue-append如获至宝。下载安装、编写方法、失败报错、gg，操作行云流水。。。。打断点分析原因：字符串内容中的一段script标签引用了一个它引用的js文件中的一个方法，vue-append解析到这里，找到不这个方法抛错，放弃（ps:这里心态爆炸，和项目经理理论了半天，要这么搞，被说服后，心态平和准备殊死一搏）

4. 经项目经理点拨还得使用iframe，查看文档发现srcdoc这个属性-该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。结果发现js的内容好想是有了但是css的没生效，离谱，放弃

5. 终于开始尝试iframe动态写入内容，先后使用innerHtml,append,API去尝试写入内容发现都失败了离谱，最后使用write 奇迹成功！

6. 整个过程就是要么js生效，要么就是css没生效，要么干脆啥都显示不是来，其中css没生效其实挺不理解的，因为部分样式是写在标签上的即style中的，定位用的，但是竟然没生效不理解

四、反思总结

• 对部分vue相关API不够熟悉，多花了一小点时间去求证，填坑喜加一

• 对待这方面问题经验不足，即使找对了方向，没到对的方法，从而多浪费一部分去求证，甚至去寻找其他的解决方案，对于今天这个问题来讲不应该！

五、科普时间

简单解释一下为啥其他的api不行，其实MDN翻一下就知道

• innerHtml：设置或获取 HTML 语法表示的元素的后代。所以script标签里的内容还是识别识别不了

• append：同上等效

• write ：用于向文档写入HTML表达式或JavaScript代码

  • 这里给一个MDN的连接，感觉这个API的使用还是有风险！https://developer.mozilla.org/en-US/docs/Web/API/Document/write