时间戳

首页 > 解决方案 > 页面转换后重新加载脚本（Highway JS）

javascript - 页面转换后重新加载脚本（Highway JS）

问题描述

我正在尝试在我的网站上实现页面转换。现在，我选择使用“ HighwayJS ”（我也在使用 Webpack）。

我的问题是，当我的新页面加载时，脚本和样式没有重新加载。我查看了 Highway 的文档，发现了这一点：一些重新加载脚本和样式的功能。但我不知道如何在我的项目中实现这两个功能......

现在，我有 2 页（比如说 Home 和 About）。每个页面都有公共文件以及特定的 javascript 文件（使用 webpack，我创建了块“ chunks: ['commons', 'vendors', 'app', pathname],”），对于 css 也是如此（每个页面都有一个公共的 css 文件以及一个特定的 css 文件）。

我已经实现了一个简单的淡入淡出过渡。这是我的 app.js 文件的样子

import './scss/main.scss';

import $ from 'jquery';
import { TimelineMax, TweenMax, Power4, Power3, Power2, Power1 } from 'gsap/TweenMax';
import Highway from '@dogstudio/highway';

import './components/shared/cursor';
import './components/shared/menu';
import './components/shared/loadingScreen';
import Fade from './components/shared/fade';

import homeRenderer from './components/renderers/home';

window.jQuery = $;
window.$ = $;

const H = new Highway.Core({
  transitions: {
    default: Fade
  }
});

// H.on('NAVIGATE_END', ({ location }) => {});
  1. 如何在 webpack 中将特定 ID 添加到我的脚本标签中以便我可以实现它？（这些函数的第一行是const main = document.querySelector('#main-script');我知道我必须在我的主脚本中添加一个 id。如果我使用多个脚本，如供应商、主脚本等怎么办？）
  2. 我怎样才能实现这两个脚本？意思是我应该把它放在哪里？（我是否创建一个H.on('NAVIGATE_END', ({ location }) => {});并将 2 个函数放入其中？）

标签： javascriptajaxtransition

解决方案

推荐阅读