vue3怎么引入一个完整的html页面，包括里面的css和js

Question

我已经有了一个页面，里面有 css 和很多 js（都是定制的 js 内容，没办法使用网上的那种先下载好包引入的方法）
我需要把他放在一个 view 视图中
不能使用修改入口文件模板的方法，因为我只有一个页面用到这个，不希望每个页面都去加载这些 js 和 css，而且我还引入了其它样式，再引入会直接冲突！
我尝试过把整个页面放到第三方服务器上，并且通过 iframe 引入，但是里面有按钮要跳转页面，我外面的框架接收不到，有没有什么好的办法能把他当作一个文件一样直接引入并且加载啊。

Answer 1

很多人说从iframe外面获取不到iframe里面的事件，也无法调用iframe里面的函数，其实不是的，问题还是出在跨域上，你外面的域名是a.com，里面的域名是b.com，当然不能让你执行，这是基本常识。

但反过来说，如果我外面的域名是a.com，里面的域名也是a.com，那为什么不能执行？都是我的域名，当然可以执行。

所以可以用iframe套起来，只要你确保里外两层域名一致即可。

这是外面调里面：

var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.getElementById("myDiv").addEventListener('click',function() {
    //doStuffHere
});

这是里面调外面：

在外面定义：

var doFunction = function() {
    alert("I was triggered from an iframe");
}

在里面调用：

parent.doFunction();

Answer 2

ifream 目前最优解，ifream交互有专门的事件接口。
你这种很像目前的前端微服务，搜一下

Answer 3

用iframe可以，需要跨域交互的话，使用postMessage进行双向通信。
postMessage API文档

Vue里添加监听message事件时，建议仅在需要处理事件的当前页面生命周期中添加，并使用onUnmounted注销事件。