Как направить ссылку на страницу, загруженную в iframe на другой странице, и прокрутить ее до нужного места одним щелчком мыши?

-- библиотека.htm --

<iframe id = "libcont" name = "libcontent">

-- content.htm --

лорем ипсум <p name = "scroll">lorem ipsum</p>

-- map.htm --

<a href = "content.htm#scroll" target = "library.htm#libcontent">Read More...</a>

Цель: нажатие на ссылку внутри "map.htm" приводит к "library.htm" с «content.htm», уже загруженным в iframe «libcont» и прокручиваемым к абзацу с тегом «прокрутка». Я не могу найти решение этой проблемы в HTML/CSS.

javascript html css

09.04.2019 19:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Прежде всего, в содержание.htm используйте я бы вместо имя для привязки:

<p id = "scroll">lorem ipsum</p>

В карта.htm используйте:

<a href='library.htm#scroll'>read more</a>

В библиотека.htm используйте javascript для передачи хэш в URL-адрес iframe:

<script>
    document.getElementById('libcont').src = 'content.htm'+window.location.hash;
</script>

В результате iframe загрузится как content.htm#прокрутка и прокрутится до привязки.

09.04.2019 21:24

Ответ принят как подходящий

Вы можете добиться этого с помощью javascript: Якорь ведет к library.htm, функция onload библиотеки загружает iframe и использует scrollIntoView()(документ) для прокрутки в нужное место.

карта.htm

<!DOCTYPE html>
<html>
<body>
    <h2>Map</h2>
    <a href = "library.htm">Read More...</a>
</body>
</html>

библиотека.htm

<!DOCTYPE html>
<html>
<head>
<script>
   loadContent = function() {
       var frame = document.getElementsByName('libcontent')[0];
       frame.onload = function() {
           frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();
       }
       frame.src='content.htm';

   };
  </script>
 </head>
 <body onload = "loadContent()">
     <div style = "height:1000px; background:gray;"> </div>
     <h2>Library</h2>
     <iframe id = "libcontent" name = "libcontent"></iframe>
     <div style = "height:1000px; background:gray;"> </div>
 </body>
 </html>

содержание.htm

<!DOCTYPE html>
<html>
<body>
    <div style = "height:1000px; background:black;"> </div>
    <h2> Content </h2>
    lorem ipsum <p name = "scroll">lorem ipsum</p>
 <div style = "height:1000px; background:black;"> </div>
</body>
</html>

ОБНОВЛЕНИЕ: загрузить другое содержимое

Для этого мы будем использовать параметр запроса («контент»).

карта.htm

<!DOCTYPE html>
<html>
<body>
    <h2>Map</h2>
    <a href = "library.htm?content=content1">Content 1</a>
    <a href = "library.htm?content=content2">Content 2</a>
</body>
</html>

библиотека.htm

 <!DOCTYPE html>
 <html>
 <head>
 <script>
     loadContent = function() {

     const urlParams = new URLSearchParams(window.location.search);
     const content = urlParams.get('content');

     // Check if the query param 'content' exists
     if (content) {
        var frame = document.getElementsByName('libcontent')[0];

        frame.onload = function() {
        frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();

        }
        // Loads the content
        frame.src= content + '.htm#scroll';

      }
  };  
 </script>
 </head>
 <body onload = "loadContent()">
     <div style = "height:1000px; background:gray;"> </div>
     <h2>Library</h2>
     <iframe id = "libcontent" name = "libcontent"></iframe>
     <div style = "height:1000px; background:gray;"> </div>
 </body>
 </html>

content2.htm

<!DOCTYPE html>
<html>
<body>
    <div style = "height:1000px; background:black;"> </div>
    <h2> Content 2 </h2>
    lorem ipsum <p name = "scroll">lorem ipsum</p>
 <div style = "height:1000px; background:black;"> </div>
</body>
</html>

content1.htm

<!DOCTYPE html>
<html>
<body>
    <div style = "height:1000px; background:black;"> </div>
    <h2> Content 1 </h2>
    lorem ipsum <p name = "scroll">lorem ipsum</p>
 <div style = "height:1000px; background:black;"> </div>
</body>
</html>

Спасибо. Могу я побеспокоить вас еще двумя вопросами? 1) Можно ли изменить это, чтобы предварительно загружать контент только в том случае, если конкретная ссылка открывала страницу (в отличие от строки меню)? 2) Можно ли написать так, чтобы разные ссылки из "map.htm" загружали разное содержимое? (content1.htm, content2.htm и т. д.).

— 09.04.2019 22:10

Пожалуйста. Для обоих ваших вопросов я предлагаю использовать параметр запроса. Например: <a href = "library.htm?content=content1">Подробнее...</a>. В сценарии вы проверяете, существует ли «контент». если он существует, вы загружаете iframe с именем страницы, переданным в качестве параметра. Я обновлю свой ответ примером.

— 09.04.2019 22:30

09.04.2019 21:36