1

Hola tengo un proyecto Vue.js con una estructura de rutas en una sola pagina(SPA) típica de los frameworks reactivos con un componente principal donde creo el nav y el footer y dentro la llamada a la ruta correspondiente con <router-view></router-view>

Lo que ocurre es que necesito introducir una pagina con código externo dentro del proyecto que no puedo mezclar con Vue.js porque tiene mucho css que es demasiado incompatible y extenso como para hacerlo funcionar junto. Por ello quería ver si se podía introducir dentro del propio template una llamada a una pagina html entera externa, lo que se suele hacer con Iframe.

Lo primero que prove fue el propio Iframe con una etiqueta simple:

<template>
<iframe src="htmlexterno.html"></iframe>
</template>

Pero no me funciono y por lo que he visto es porque parece ser que Iframe no es compatible con Vue.js

Entonces buscando en internet encontre este codigo:

<template>
<div v-html="varhtml"></div>
<template>
<script>
export default {
data: {
    varhtml: '<p>Loading...</p>'
},

ready() {
    this.$http.get('htmlexterno.html').then(response => {
        this.varhtml = response.data;
    });
}
}
</script>

Pero tampoco me funciona.

Después gracias la ayuda de un foro conseguí que me cargue urls de internet, pero htmlexterno.html es un proyecto local y no me funciona.

La último que hice es esto pero solo funciona si pongo una url de intenet(no local):

<template>
    <iframe :src="ruta"></iframe>
</template>
<script>
export default {
    data: () => ({
        ruta: 'htmlexterno.html'
    })
}
</script>

Agradecería si alguien me pudiese ayudar.

1 respuesta 1

1

La solución que al final me funciono fue poner el archivo html fuera del proyecto principal como si proviniese de otra web.

<iframe src="../../../../webexterna/htmlexterno.html"></iframe>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.