4

First of all, excuse my English, I'm using a translator.

I have a Vue.js project with a single-page path structure (SPA) typical of reactive frameworks with a main component where I create the nav and the footer and within the corresponding path call with <router-view></router-view>

What happens is that I need to introduce a page with external code inside the project that I cannot mix with Vue.js because it has too much css that is too incompatible and extensive to make it work together. So I wanted to see if you could enter within the template itself a call to a whole external html page, which is usually done with Iframe.

The first thing they provided was the Iframe itself with a simple label:

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

But it didn't work, and from what I've seen, it seems that Iframe is not compatible with Vue.js

Then searching the internet I found this code:

<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>

But it doesn't work for me either.

Then thanks to the help of an answer in this question I got it to load internet urls, but htmlexterno.html is a local project and doesn't work for me.

The last one I did is this but it only works if I put an internet url (not local):

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


I'd appreciate it if someone could help me.

ivanao
  • 215
  • 1
  • 5
  • 14
  • 1
    Did you try to set `varhtml` in `data` to bind it? – Laerte Apr 20 '20 at 19:53
  • 1
    Yes, but that wasn't it. – ivanao Apr 20 '20 at 20:00
  • 2
    *"Iframe is not compatible with Vue.js"* who told you this? Vue is compatible with all HTML, CSS and JS technologies and it's completely agnostic (it doesn't care what it renders). It doesn't care what's inside of it, it doesn't care what's outside of it. It can even include React, Angular or any other framwork or it can live inside any of them. Vue can render a button as well as applications with thousands of pages. Whoever told you Vue is not compatible with iframes doesn't know much about Vue. – tao Apr 20 '20 at 20:17

2 Answers2

4

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

I noticed you're trying to load local file iframe. Try replace URL of that file or read Static Assets Handling instead.

P/S Loading iframe is basic HTML stuff, so Vue is more than that for sure.

SC Kim
  • 545
  • 4
  • 14
2

Whoever told you Vue is incompatible with <iframe>s didn't know much about Vue. Here's a simple example:

new Vue({
  el: '#app',
  data: () => ({
    source: 'https://en.wikipedia.org/wiki/Main_Page'
  })
})
#app, #app iframe {
  height: 100vh;
  width: 100vw;
  border: none;
  box-sizing: border-box;
}
body {
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <iframe :src="source"></iframe>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • If I use an internet website (www.wikipedia.com) it works but in my case it is a local website (htmlexterno.html) and that is not how it works – ivanao Apr 21 '20 at 12:42
  • 1
    You need to configure that website to allow embedding in an ` – tao Apr 21 '20 at 13:16
  • 1
    See [this](https://stackoverflow.com/questions/39483348/how-to-allow-iframe-embedding-only-for-whitelisted-websites), or [this](https://stackoverflow.com/questions/8169582/protecting-iframe-only-allow-it-to-work-on-one-domain) on how to allow embedding. Before you ask if it's possible to bypass embedding content which doesn't allow it: basically, no. But if you developed yourself such a method, if anyone found out about your method and it could be linked to back to you, you would be liable for stealing that content. That's the legal equivalent. – tao Apr 21 '20 at 13:28