Адаптивное отображение текстового контента ПК на страницах H5

внешний интерфейс HTML

ловитьПоследний блогТеперь добавьте новое требование: страница h5 B Zone отображает HTML-фрагменты форматированного текста.

Описание функции

  • Требовать

    • На стороне ПК отображается HTML-фрагмент форматированного текста, который загружается и отображается в области B на странице H5 мобильного телефона.

    • Сохраните стиль на стороне ПК и масштабируйте его, чтобы он соответствовал экрану мобильного устройства.

    • Если форматированный текст HTML содержит изображения

      • Изображения не загружаются по умолчанию
      • Когда видимая область мобильного телефона достигает области B, изображение запускает отображение ленивой загрузки.
      • Когда вы нажимаете на изображение с форматированным текстом, появляется эластичный слой для загрузки изображения, которое можно увеличить и просмотреть.

  • намекать

    • Рассмотрите возможность использования iframe для обработки форматированного текста
    • Но учитывайте связь и совместимость родительской и дочерней страниц iframe
    • Также рассмотрите адаптацию высоты родительской страницы, вызванную изменением высоты, вызванным ленивой загрузкой изображений с форматированным текстом в iframe.

Конкретный процесс реализации

Почему выбирают фреймы

Когда я вижу спрос, первое, что приходит мне в голову, это просто отобразить фрагмент форматированного текстового контента.Зачем использовать iframe? У фреймов все еще много недостатков:

  1. Будет генерировать много страниц, непростых в управлении
  2. не легко печатать
  3. Кнопка "Назад" в браузере не работает
  4. Код сложен и не может быть проиндексирован некоторыми поисковыми системами. Это очень важно. Существующие сканеры поисковых систем не могут хорошо обрабатывать содержимое в фреймах, поэтому использование фреймов будет наносить ущерб поисковой оптимизации.
  5. Большинство небольших мобильных устройств (телефоны КПК) не могут полностью отображать кадр, а совместимость с устройствами оставляет желать лучшего.
  6. Страницы с несколькими фреймами увеличивают http-запрос сервера, что нежелательно для больших сайтов.

Зачем использовать столько недостатков (ключ в том, что я не знаком с использованием iframe, смайл вручную...)
Совет эксперта, потому что я хочу использовать iframe, чтобы изолировать влияние глобальных стилей на стили форматированного текста, эммм, это действительно имеет смысл.

Например, если вы пишете стиль в глобальном стиле:

	p {
		font-size: 18px; 
	}

Тогда содержимое форматированного текста также будет затронуто этим глобальным стилем, а размер шрифта во всех p будет равен 18px. Это не то, чего мы хотим.

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

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

Реализовать идеи

Адаптация изображения

Поскольку возвращаемые данные являются фрагментом html, выберите атрибут srcdoc для iframe (который определяет HTML-содержимое страницы, отображаемой в 

<meta name="viewport" content="width=device-width, initial-scale=1">

Установить глобальный стиль

<style>
    body {height: ${clientHeight}px;}   
    img {max-width: ${clientWidth}px;}
</style>

clientHeight — это высота экрана, а clientWidth — ширина экрана.
Высота тела установлена, потому что требования этого блога соответствуют требованиям предыдущего блога (должен быть достигнут эффект демпфирования).В iframe я отключил прокрутку.Конкретные идеи см.Последний блог.
Установка максимальной ширины img служит для достижения самонастройки изображения, и оно не будет выходить за пределы экрана, потому что оно слишком большое.

Ленивая загрузка изображения

Перейдите непосредственно к коду:
Измените содержимое:

    const newHtml = result.content.replace(/<img.*?\/>/g, match => {
        return match.replace('src', 'src="./images/iframe/loading.gif" data-src');
    });

Ленивая функция загрузки:

    const clientHeight = $(window).height();
	    let continueLoading = true;
	    const imgTags = document.getElementsByTagName('img');
	    const lazyload = () => {
	        let num = 0;
	        for (let img of imgTags) {
	            const { top } = img.getBoundingClientRect();
	            if (/loading.gif/.test(img.src)) {
	            	top < clientHeight && (img.src = img.dataset.src);
	            } else {
	            	num++;
	            }
	        }
	        num === imgTags.length && (continueLoading = false);
    };

    $('.main').on('touchmove', e => {
        continueLoading && lazyload();
    });

Здесь я заменяю его на обычный, сначала отображаю загрузку, а для запоминания адреса изображения использую data-src. Затем обнаружьте и ленивую загрузку в событии touchmove:
getBoundingClientRect() используется для определения того, находится ли изображение в видимой области.
continueLoading — это флаг, когда все изображения загружены, функция отложенной загрузки больше не будет запускаться.

Всплывающее окно изображения

Это очень просто, просто используйте абсолютно позиционированный div для отображения изображения, установите цвет фона div на белый (или любой другой цвет, который вам нравится), display: none, при нажатии на изображение в iframe установите img в div Значение тега src и отображение div. Щелкните изображение слоя с маркерами еще раз, чтобы скрыть слой с маркерами.

    $('.main img').on('click', e => {
        $('.img-modal .img-detail').attr('src', e.target.src);
        $('.img-modal').show();
    });
    $('.img-modal').on('click', () => {
    	$('.img-modal').hide();
    });

общение между отцом и сыном

Потому что эффект демпфирования также реализуется в области B, где находится ifame. Идея других частей такая же, как у эффекта демпфирования в области A, за исключением того, что когда пользователь достигает верхней части страницы и тянет вниз до критического значения, используйте postmessage, чтобы уведомить родительскую страницу для отображения области A. и скрыть область B.
В фрейме:

	$('.main').on('touchend', e => {
    	//其他逻辑
    	...
        if (last_distance >= RANGE_TOP) {
            //切换到上一个页面
            window.parent.postMessage('prev', '*');
            ...
        }
    });

На родительской странице:

	window.addEventListener('message', rs => {
        if (rs.data === 'prev') {
            $('.pageB').hide();
            $('.pageA').show();
            ...
        }
    });

окончательный эффект

最终效果

оптимизация

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

  • Демпфирующий эффект: Идея области AB точно такая же, и ее можно рассматривать как публичный плагин.
  • Щелчок по изображению: используйте fastclick или zepto для оптимизации кликов на мобильных устройствах.
  • Отладка реальной машины: только что отлаженная в инструментах разработчика Google, а не на реальной машине, предполагается, что существует проблема совместимости.

См. конкретный кодмой гитхаби подробности о том, как использовать проект.
Из-за лени я не стал выносить этот код в отдельное репо, а поставил вместе с последним, чего уж очень стыдно. . .

Категории