Javascript html内容在Iframe中呈现，但不在div中呈现_Javascript_Html_Node.js_Express_Vue.js

Javascript html内容在Iframe中呈现，但不在div中呈现

javascript html node.js express vue.js

Javascript html内容在Iframe中呈现，但不在div中呈现,javascript,html,node.js,express,vue.js,Javascript,Html,Node.js,Express,Vue.js,我想创建一个Vue应用程序，用于呈现另一个Vue应用程序。这是通过创建一个Express文件服务器来实现的，该服务器为要呈现的应用程序的index.html提供服务我使用div容器创建了一个文件，并从文件服务器获取要渲染的应用程序 <template> <div id="customAppContainer"></div> </template> <script> export default { async mounted

我想创建一个Vue应用程序，用于呈现另一个Vue应用程序。这是通过创建一个Express文件服务器来实现的，该服务器为要呈现的应用程序的index.html提供服务

我使用div容器创建了一个文件，并从文件服务器获取要渲染的应用程序

<template>
  <div id="customAppContainer"></div>
</template>

<script>
export default {
  async mounted() {
    const fullRoute = this.$router.currentRoute.fullPath;
    const routeSegments = fullRoute.split("/");
    const appsIndex = routeSegments.indexOf("apps");
    const appKey = routeSegments[appsIndex + 1]; // The name of the app

    const response = await fetch(`http://localhost:3000/apps/${appKey}`); // fetch the index.html
    const html = await response.text(); // convert the filecontent to a string
    document.getElementById("customAppContainer").innerHTML = html; // load the file content into the div
  }
};
</script>


导出默认值{
异步装入（）{
const fullRoute=此。$router.currentRoute.fullPath；
const routeSegments=完整路由分割（“/”）；
const appsIndex=routeSegments.indexOf（“应用”）；
const appKey=routeSegments[appsIndex+1]；//应用程序的名称
const response=等待获取(`http://localhost:3000/apps/${appKey}`）；//获取index.html
const html=wait response.text（）；//将文件内容转换为字符串
document.getElementById（“customAppContainer”）.innerHTML=html；//将文件内容加载到div中
}
};

通过这样做，我得到一个空白页，没有控制台错误。但是DOM显示html字符串在该div容器中创建了有效的DOM元素。当我将div更改为iframe并将获取url分配为该iframe的src时，该iframe能够正确呈现Vue app/index.html文件

出于调试目的，这是我从文件服务器获得的HTML字符串：

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>my custom app</title><link href=/js/app.5eb51f47.js rel=preload as=script><link href=/js/chunk-vendors.c3422c1d.js rel=preload as=script></head><body><noscript><strong>We're sorry but my custom app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=customApp></div><script src=/js/chunk-vendors.c3422c1d.js></script><script src=/js/app.5eb51f47.js></script></body></html>

mycustomapp很抱歉，没有启用JavaScript，我的自定义app无法正常工作。请使其继续。

如何避免使用iframe并将html内容加载到div中？

我最终通过将一个对象嵌入div容器并将其数据分配给src url来实现它

<template>
  <div id="customAppContainer"></div>
</template>

<script>
export default {
  async mounted() {
    const fullRoute = this.$router.currentRoute.fullPath;
    const routeSegments = fullRoute.split("/");
    const appsIndex = routeSegments.indexOf("apps");
    const appKey = routeSegments[appsIndex + 1];

    document.getElementById(
      "customAppContainer"
    ).innerHTML = `<object data="http://localhost:3000/apps/${appKey}"></object>`;
  }
};
</script>


导出默认值{
异步装入（）{
const fullRoute=此。$router.currentRoute.fullPath；
const routeSegments=完整路由分割（“/”）；
const appsIndex=routeSegments.indexOf（“应用”）；
const-appKey=routeSegments[appsIndex+1]；
document.getElementById(
“customAppContainer”
).innerHTML=`；
}
};

它应该可以工作。如果使用JQuery，请尝试使用$（）.load（）方法