使用香草JavaScript的HTML模板

Question

I'm having a SharePoint app that retrieve page content from a library, and feeding both desktop and mobile sites. We also have links within the page, how can I render HTML templating with vanilla JavaScript?

For example, we have couple on-page links from the page content:

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

I want to add either http://<sitename>/pages/ or http://<sitename>/pages/m/ infront of the href depends on the screen size or devices.

How can I achieve that via vanilla JS ?

Answer 1

Screen size way:

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;

More elegant "duck type" mobile check

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

Also there is a way to analyze navigator.userAgent value

Answer 2

With a lightweight library called lit-html it's straightforward:

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)