Как использовать Fetch API для получения другого файла html в зависимости от размера экрана и отображения его в div - PullRequest
Новая
       61

Как использовать Fetch API для получения другого файла html в зависимости от размера экрана и отображения его в div

0 голосов
/ 05 августа 2020

Я оптимизирую свой сайт для скорости загрузки и пытаюсь отобразить две разные галереи изображений: Swiper JS для мобильных устройств и Drift JS для настольных устройств.

Уловка в том, что эти библиотеки тяжелые, и я не хочу загружать одну, если она не нужна (дрейф JS на мобильном устройстве или Swiper JS на рабочем столе), что означает наличие обоих в файле HTML и использования display: none ; чтобы скрыть тот, который не нужен, не может быть и речи

У меня есть div 

  <div id="productImage">
  </div>

Цель состоит в том, чтобы изменить элемент, отображаемый div productImage в зависимости от размера экрана - чтобы он будет отображать swiper. html фотогалерея, если размер экрана меньше 800 пикселей, и отображение смещения. html фотогалерея, если размер экрана больше 800 пикселей.

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

Вещи, которые я пробовал:

From

Как получить конкретный div из одного html файла и поместить его в другой html файл, используя обычный JavaScript?

Я пробовал использовать 

ar imageBox = document.getElementById("product-image")
.forEach.call(document.imageBox), function(imageBox) {
    if (window.innerWidth < 800 ) {
              var driftLink = document.createElement('htmlRef'); 
              driftLink.rel = 'import';   
              driftLink.href = 'drift.html';  
              imageBox.appendChild(driftLink);  
 }
      else {
         var swiperLink = document.createElement('htmlRef'); 
              swiperLink.rel = 'import';   
              swiperLink.href = 'swiper.html';  
              imageBox.appendChild(swiperLink);
      }
  });

, но html импорт обесценился и больше не работает с февраля 2020 года

Я также пробовал 

 var imageBox = document.getElementById("product-image")
.forEach.call(document.imageBox), function(imageBox) {
    if (window.innerWidth < 800 ) {
        fetch("driftbox.html")
         .then(response => response.text())  
         .then(html => {
         imageBox.innerHTML = html;
         console.log(html);
         })
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
      }
      else {
        fetch("swiper.html")
        .then(response => response.text())  
        .then(html => {
        imageBox.innerHTML = html;
        console.log(html);
        })
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
      }
  });

А для отладки пробовал использовать XML (несмотря на то, что он также обесценился), но безрезультатно. 

var imageBox = document.getElementById("product-image")
.forEach.call(document.imageBox), function(imageBox) {
    if (window.innerWidth < 800 ) {
            if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
             window.XMLHttpRequest= function() {
             return new ActiveXObject('MSXML2.XMLHttp');
             };
             }
             var xhr= new XMLHttpRequest();
             xhr.open('GET', 'drift.html', true);
             xhr.onreadystatechange= function() {
             if (this.readyState!==4) return;
             if (this.status!==200) return;
             imageBox.innerHTML= this.responseText;
             };
             xhr.send(); }
      else {
        
             if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
             window.XMLHttpRequest= function() {
             return new ActiveXObject('MSXML2.XMLHttp');
             };
             }
             var xhr= new XMLHttpRequest();
             xhr.open('GET', 'swiper.html', true);
             xhr.onreadystatechange= function() {
             if (this.readyState!==4) return;
             if (this.status!==200) return; // or whatever error handling you want
             imageBox.innerHTML= this.responseText;
             };
             xhr.send();
      }
  });

Насколько я понимаю, я должен использовать eventListener для измерения ширины экрана и Fetch API для получения файла HTML, но я не совсем конечно.

1 Ответ

0 голосов
/ 05 августа 2020

Понятно! 

function swiper() {
  fetch("swiper.html")
  .then(response => response.text())  
  .then(html => {
  imageBox.innerHTML = html;
  console.log(html);
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
}

function drift() {
  fetch("drift.html")
  .then(response => response.text())  
  .then(html => {
  imageBox.innerHTML = html;
  console.log(html);
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
}

var widths = [0, 800];

function resizeFn() {
if (window.innerWidth>=widths[0] && window.innerWidth<widths[1]) {
swiper();
} else {
drift();
}
}
window.onresize = resizeFn;
resizeFn();

Работает

...