Как обрабатывать как обычный объект?

#html #css

#HTML #css

Вопрос:

У меня есть заголовок, который также включает выпадающий список файла «header.html » с размером 1024×180 пикселей. Поскольку я хотел бы использовать этот заголовок для многих страниц позже, я хотел бы иметь заголовок в отдельном файле и импортировать его позже.

Теперь на веб-странице я импортирую свой заголовок с помощью iframe следующим <iframe style="border-width:0px; width: 1024px; height: 180px"src="common/header.html"></iframe> образом. Я пытаюсь установить iframe с размером заголовка (1024×180). Этого достаточно в обычных обстоятельствах, когда выпадающего списка нет. Однако, когда появляется выпадающий список, очевидно, что места недостаточно, и, таким образом, iframe помещает прокрутку, чтобы увидеть дополнительную выпадающую информацию

Я попытался добавить свойства overflow:visible в стиле, но, похоже, он не работает добавить все. На самом деле, все свойства overflow не работают, независимо от того, какие настройки он установил (поскольку по-прежнему требуется прокрутка для просмотра дополнительного содержимого). Обычная настройка «прокрутка = нет» также не решается, поскольку она просто отключает прокрутку.

Конечно, я могу установить высоту на большое число, чтобы компенсировать потребность в высоте, если есть выпадающий список, но это также оставляет для него много места. Я хочу, чтобы в обычном случае заголовок не перекрывался с другим объектом, но если есть выпадающий список, допустимо, чтобы он перекрывался с другим элементом ниже. Это возможно, если заголовок записан в текущем HTML-файле, но не при импорте iframe в данный момент. И, наконец, я не хочу менять положение другого элемента HTML, так как я не хочу переносить слишком много настроек на несколько страниц.

Мой вопрос в том, как обрабатывать iframe, поскольку он был обычным объектом (или, в моем случае, обычным заголовком)? Если это невозможно, какой другой вид импорта я могу использовать (который включает только HTML или, самое большее, JavaScript)

Ответ №1:

То, что вы ищете, может быть достигнуто с помощью iframe, но вы не должны этого делать. Насколько я понимаю, вы хотели бы создать один файл заголовка в виде HTML-файла, а затем скопировать его на каждую страницу. Как вы выяснили, одна из проблем заключается в том, что фреймы iframe не могут переполняться. Это означает, что все, что должно «всплывать» над iframe, должно быть включено в родительскую html-страницу, а iframe должен отправлять родительскому объекту инструкции javascript относительно того, какое всплывающее окно должно быть открыто / закрыто.

Было бы намного лучше решить эту проблему на стороне сервера. Например, в php вы можете создать header.php файл и для каждого файла шаблона (скажем shop.php , home.php ) вы просто добавляете файл заголовка вверху, вот так:

 <?php include('header.php'); ?>
 

Комментарии:

1. Вы слышали о <base> теге? Поместите его в документ iframe и нажмите на ссылку из этого документа. <base target="_parent">

2. @Chloe Anderson: спасибо, что указали на это. Я отредактировал свой ответ. Итак, в принципе, да, вы можете открывать гиперссылки в родительском файле, но по-прежнему нет всплывающего окна, которое было бы удобно использовать в качестве меню заголовка.