vue встроенный iframe проблема

Vue.js
vue встроенный iframe проблема

Источник проблемы: Заказчик попросил отобразить некоторые документы, а документы уже готовые, запакованы в html и прямо встроены в страницу. Но есть еще некоторые проблемы в середине, запишите это.

Встроить iframe в vue

<iframe src="静态文件路径" frameborder="0" scrolling="auto"></iframe>

Проект построен с использованием каркаса vueCli3.0, а статический HTML-код, который нам нужно импортировать, помещается в статическую папку в разделе public. Следующим образом:

Следует отметить, что атрибут src iframe может напрямую писать «static/index.html», где корневой путь src является общедоступным.

Неважно, где я помещал HTML раньше, это всегда 404. Это было давно.

После введения есть еще одна проблема, то есть появляются две полосы прокрутки в полосе прокрутки iframe и полосе прокрутки внешнего родительского контейнера. Для эстетики и удобства пользователя здесь нужно удалить один.

Я решил удалить полосы прокрутки из внешнего родительского контейнера. Это касается того, какой должна быть высота iframe.Согласно расчету различных разрешений, вычтите 112 из высоты полного текста веб-страницы, чтобы iframe был

Так же есть проблема, когда страница переключается на другую страницу, а потом переключается обратно на страницу где находится iframe, т.к. created больше не сработает, снова появятся две полосы прокрутки.

Итак, мы написали слушателя, когда маршрут возвращается на страницу, снова вычисляет разумную высоту iframe.

Таким образом, даже если проблема двух полос прокрутки решена. Странице нужно только прокрутить полосу прокрутки iframe, чтобы просмотреть документ.

наконец

Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись WeChat [Hot Front End], чтобы общаться и расти вместе.