Problem source: The client asked for some documentation to be presented, and the documentation was ready-made, packaged HTML, embedded directly into the page. But there are still some problems in the middle, note.

Embedded iframe in vUE

<iframe src="Static file path" frameborder="0" scrolling="auto"></iframe>
Copy the code

The project is scaffolded with Vue Li3.0. The static HTML we need to import is placed under the static folder public. As follows:

The SRC attribute of iframe is static/index.html, where the root path of SRC is public.

Wherever I put my HTML, it was 404 for a long time.

Another problem is that there are two scrollbars in the iframe and the scrollbar in the parent container. For the sake of aesthetics and user experience, I definitely want to remove one here.

I chose to remove the scrollbar of the outer parent container. The iframe height is less than 100% of the outer layer height, so that the outer layer scrollbar is not triggered.

Another problem is that when a page switches to another page and then switches back to the page where the iframe is created, since created is no longer triggered, two scrollbars appear again.

So we write a listener that, when routed back to the page, calculates the reasonable iframe height again.

In this way, the problem of two scrollbars is solved. The page simply needs to scroll through the iframe scroll bar to view the document happily.

The last

Welcome to pay attention to my wechat public number [hot front], communication and growth together.