Почему якоря имеют разное поведение при изменении высоты iframe? - PullRequest
Новая
       5

Почему якоря имеют разное поведение при изменении высоты iframe?

1 голос
/ 25 апреля 2019

Помогите понять следующий момент.

На другой странице есть страница, которая подключается через iframe.Предположим, что макет подключенной страницы (iframe.html) имеет следующую форму: 

<!DOCTYPE html>
<html>
<head>
    <title>iFrame</title>

    <style type="text/css">
        .inner__block {
            width: 100%;
            background: #f1f1b4;
            height: 100px;
            border-bottom: 3px solid black;
        }

        .test__block {
            width: 100%;
            height: 500px;
            background: #eceb51;
            border-bottom: 3px solid black;
        }

        h3 {
            margin-top: 0;
            padding-top: 0;
        }
    </style>
</head>
<body>
    <div class="inner__block">
        Very big iframe
        <br>
        <a href="#test">#test</a>
        <br>
        <a href="#test1">#test1</a>
        <br>
        <a href="#test2">#test2</a>
    </div>

    <div id="test" class="test__block">
        <h3>TEST</h3>
    </div>

    <div id="test1" class="test__block">
        <h3>TEST 1</h3>
    </div>

    <div id="test2" class="test__block">
        <h3>TEST 2</h3>
    </div>

    <div id="test3" class="test__block">
        <h3>TEST 3</h3>
    </div>
</body>
</html>

Страница, на которой расположен элемент iframe, имеет следующий макет: 

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <style>
        .iframe {
            display: block;
            width: 100%;
            height: 2131px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h1>Test</h1>

    <div>
        <iframe class="iframe" src="iframe.html" scrolling="no" frameborder="no"></iframe>
    </div>
</body>
</html>

При таком сценарии последующие привязки в iframe не работают.

Но если вы уменьшите высоту iframe в стилях вдвое,затем якоря начинают работать как надо.

Почему такое поведение якорей зависит от высоты iframe?

1 Ответ

0 голосов
/ 25 апреля 2019

Это абсолютно нормально. И браузер не может знать, чего вы пытаетесь достичь.

iframe - это собственный документ с отдельным прокручиваемым HTML. Ваш iframe настолько высок, что содержимое iframe отображается полностью, поэтому полоса прокрутки (кроме вашего scrolling="no") отсутствует.

Это станет более понятным, если вы измените высоту фрейма на что-то меньшее - скажем, 800 пикселей - и разрешите прокрутку фрейма. Тогда вы увидите, что сам iframe прокручивается. См. этот кодовый блок для демонстрации

Таким образом, внешнее окно не имеет никакого представления о внутреннем.

Что вы можете сделать, это прослушать события щелчка, посмотреть, не вовлечена ли цель, отправить postMessage из iframe в окно контейнера с указанием позиции цели loink, а затем решить, является ли контейнер окно должно быть прокручено

У Дэвида Брэдшоу есть решение: iFrame Resizer V4
Это может автоматически изменить размер фрейма и заставить свитки работать как вам угодно.

Чтобы библиотека работала, вам нужно добавить это в iframe.html: 

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.1.1/js/iframeResizer.contentWindow.min.js"></script>

и это в container.html 

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.1.1/js/iframeResizer.min.js"></script>
<script>
// init the iframes to work with iframeresizer
iFrameResize({inPageLinks: true},
  ".iframe" // this is the selector for the iframes to work like this
);
</script>

Вот рабочий пример: https://codepen.io/HerrSerker/pen/eec95c1023a9933c579221e7a37b66dc?editors=1111 (Это ручка iframe: https://codepen.io/HerrSerker/pen/85643c47de49983ca67c8898f74ef4fb?editors=1100)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...