A
A
Alexey2020-08-08 21:19:15
HTML
Alexey, 2020-08-08 21:19:15

How to force the desktop version to open inside an iframe?

This is a personal project, if anything :)
I am writing a kind of template page generator on vuejs.
I decided to organize a preview of the created pages.
They lie on the same domain as the api.
Now, when saving the editor, an array of pages comes from api: link + title
The list of pages on the right is organized as an accordion, when clicked on in the left iframe, the url changes to the corresponding page preview.

<v-col cols="8">
      <iframe
          name="main"
          :src="iframe.src"
          @load="frameLoad"
          v-show="iframe.loaded"
          sandbox="allow-scripts"
          width="750" height="750" frameborder="1"
      ></iframe>
      <img v-show="!iframe.loaded" src="/assets/img/loading.gif" width="200" alt="loading">
    </v-col>
    <v-col cols="4" >
      <v-expansion-panels accordion v-model="first">
        <template v-for="(elem, index) in pages">
                                    ... перечень страниц....

The iframe now has static dimensions of 750x750 with internal scrolling. In the future, it is planned to make a rubber size for mobile phones.

1. The main question is how to force the page inside the iframe to be forced to open in desktop (and then tablet / mobile mode). For the layout is generated with breakpoints on desktop\tablet\mobile. In the future, I would like to switch the display mode inside the iframe (like the Google toggle devise toolbar) by clicking on the corresponding buttons.
I would not like to make three separate styles for three modes only for the designer.

2. Are there rules for implementing frame\iframe in vuejs or are they redundant? I used vue-frame (it didn't work for me) and vue-friendly-iframe (seemed pointless to me). I didn’t find any other ones (most likely I was looking badly).

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Aetae, 2020-08-09
@Upachko

I spied on such a chip in the codepen: set the root to the required width forcibly and use

transform: scale(реальная ширина/установленная ширина)
, writing back.
As for the special vue-frame - what exactly do you want from it? A regular frame does the job.)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question