时间戳

首页 > 解决方案 > 从外部 javascript 渲染 HTML

javascript - 从外部 javascript 渲染 HTML

问题描述

我的任务是在客户的网站上显示我的产品列表。我的想法是在客户端的网站中包含我的 JavaScript 文件调用这样的函数，

    <div id="my-product-list"></div>

    <script src="https://example.com/myscript.js"></script>
        const myproducts = new Products('#my-product-list', 12323);
        myproducts .setup();
    </script>

这是实现这一目标的正确方法吗？

如果是，我如何media为我的元素包含 css 样式（查询）？

如果不是，最好的方法是什么？

标签： javascripthtmlweb

解决方案

是的！这当然是实现您所需要的一种方式。

要包含样式，您可以像引用脚本一样简单地链接到您的样式。

客户网站

<div id="my-product-list"></div>

<script src="https://example.com/myscript.js"></script>
<script>
  initProducts('#my-product-list', '31337')
</script>

<link href="https://example.com/mystyles.css" rel="stylesheet">

myscript.js

function initProducts(selector, clientId) {
  const baseEl = document.querySelector(selector)
  if (baseEl) {
    fetch('http://example.com/products/' + clientId)
      .then(response => response.json())
      .then(data => {
        baseEl.innerHTML = data
      });
  } else {
    console.warn('baseEl not found', selector)
  }
}

我的样式.css

#my-product-list {
  ...
}

#my-product-list div {
  ...
}

@media (min-width: 600px) {
  #my-product-list {
    ...
  }
}

推荐阅读