时间戳

首页 > 解决方案 > 如何共享 HTML/CSS/JS 的标头？

javascript - 如何共享 HTML/CSS/JS 的标头？

问题描述

我正在工作中开始一个新项目，我们的任务是创建一个通用标题。这意味着在我们拥有的不同域/服务器、客户创建的站点和第三方站点上，我们需要一种非常简单的方法来将此代码提供给人们。

这个通用标题还将包含一些搜索功能，这与我的问题略有相关。简而言之，它将包含 JavaScript 来更改action其元素的属性<form>，具体取决于下拉选择，以及提交表单。

我们希望标头工作的方式是，它位于一个位置，我们正在考虑某种 HTTP 请求来获取标头。在我们看来，这将最大限度地提高 Universal Header 的可移植性。

标头需要与 WordPress 很好地集成（不是问题），但也需要与 AngularJS 集成，在我们的讨论中，不太确定这是否可行。因此，搜索功能的“稍微相关”部分。

我们讨论的解决方案之一是在 HTML 中执行此答案，但我一直对通过 HTTP 请求原始 HTML 并只是将其转储到页面中感到更加不安，但也许这是正确的方法，但也许不是？由于我们不确定，我们考虑了JIRA 问题收集器，他们基本上将 JavaScript 流式传输给客户，然后构建问题跟踪器按钮，固定在包含一些 HTML、CSS 和 JS 的页面的一侧。然后，用户可以单击此按钮，这将打开一个准备提交的表单。这可能过于简单，但基本上，他们的 JS 代码片段打包 HTML/CSS/JS 并将数据提交到他们的服务器。

这是我们想要的方向：让一个文件包含我们需要的所有内容。但是，我想知道一些事情：

最初，对于上面的最后一点，我正在考虑将它附加到一个window对象上。然后在 JavaScript 中创建一个自定义事件处理程序——但是你是怎么做的呢？也许下面的伪代码离基地很远，但这就是我问这个问题的原因：

/// inside the SearchController in AngularJS
$scope.defaultRealm = 'products';

/// to select default realm
document.when('angularJSLoads', function () {
    document.getElementById('universial-header').find('.dropdown', function () {
        // put actions to select $scope.defaultRealm in the dropdown options.
    })
})

/// to search in own defaultRealm
document.querySelector('.dropdown').onEvent('headerSearch', function (e) {
    e.preventDefault();
    var data = event.target.value;

    // do searching in AngularJS
})

如果有一些更好，更清洁的方法，我会很高兴听到它。

我很感激这方面的任何帮助。这对我们来说是一个新领域，总的来说，我们希望能够拥有一个高度可维护的标头，可以轻松地与不同的域等共享。

标签： javascripthtmlcssangularjsweb-component

解决方案

就个人而言，这就是我将如何处理它。

我将在要加载标题的所有页面上创建一个计划加载到的容器。该容器应该有某种背景表明它未加载（通常这是灰色的，但您的 UX 案例可能不同）

然后，要实际交付您的标头，请使用 JS 构建它。

创建一个 JS 文件（比如 buildHeader.js），其中包含编写您的 html、向您的 css 写入请求以及为您的附加 js 写入请求的代码。

推荐阅读