HTML-шаблоны с ванильным JavaScript - PullRequest
Новая
       4

HTML-шаблоны с ванильным JavaScript

0 голосов
/ 24 сентября 2018

У меня есть приложение SharePoint, которое извлекает содержимое страницы из библиотеки и загружает как настольные, так и мобильные сайты.У нас также есть ссылки на странице, как я могу рендерить HTML-шаблоны с помощью ванильного JavaScript?

Например, у нас есть пара ссылок на страницу из содержимого страницы:

<a class="template" href="/3.aspx">

Я хочу добавить либо http://<sitename>/pages/, либо http://<sitename>/pages/m/ перед href, зависит от размера экрана или устройств.

Как мне добиться этого с помощью vanilla JS?

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

С легкой библиотекой под названием lit-html все просто: 

import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';

const linkTemplate = orientation =>
  html`<a href="https://<sitename>/pages/{orientation != null ? 'm/' : '/'}3.aspx">Link text</a>`

render(linkTemplate(window.orientation), container)
0 голосов
/ 24 сентября 2018

Размер экрана: 

function isMobile() {
    return window.innerWidth < 800;
}

var mobileUrl = 'http://<sitename>/pages/m/1.html';
var desktopUrl = 'http://<sitename>/pages/index.html';
window.location = isMobile() ? mobileUrl : desktopUrl;

Более элегантный мобильный чек типа "утка" 

function isMobile() {
    return typeof window.orientation !== 'undefined';
}

Также есть способ анализа navigator.userAgent значение

...