gpt4 book ai didi

javascript - html内容在iframe中呈现,但不在div中呈现

转载 作者:行者123 更新时间:2023-11-30 19:13:49 27 4
gpt4 key购买 nike

我想创建一个渲染另一个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>


这样我得到一个空白页,并且没有控制台错误。但是DOM显示html字符串在该div容器中创建了有效的DOM元素。当我将div更改为iframe并将获取网址分配为该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>


如何避免该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>

关于javascript - html内容在iframe中呈现,但不在div中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58203521/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com