vue.js - html中引入iframe，iframe里面的js和css找不到了

问题描述

问 题

用vue写好了组件，webpack打包到dist,希望通过iframe的src指向 dist/index.html的方式，把组件动态的嵌入要所需页面，
实际嵌入的时候，报错

以下是我的方法，但是onload完成后已经加载了这些css,js，怎么引入这些文件？

var iframe = document.createElement('iframe');
    iframe.src = './dist/index.html?type=department';
    iframe.onload = function() {
      var cssLink = iframe.contentWindow.document.getElementsByTagName('link')[0];
      cssLink.href = cssLink.href.replace(/\w+\/(?=css)/g, 'dist/static/');
      var jsScript = iframe.contentWindow.document.getElementsByTagName('script');
      // debugger;
      for (var i = 0; i < jsScript.length; i++) {
        jsScript[i].src = jsScript[i].src.replace(/\w+\/(?=js)/g, 'dist/static/');
      }
    }
    document.body.appendChild(iframe);

解决方案

后面根本不需要设置的啊，你打包好了以后你index.html会引入这些文件的，你要做的就是把iframe.src指向index.html的地址就行了啊

这篇关于vue.js - html中引入iframe，iframe里面的js和css找不到了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！