为什么 Swup.js 不处理相对链接？ 我的 index.html我的页面.html

编程问答 2022-05-23

问题描述

我正在测试 Swup.js

据我所知，它不适用于相对链接。像这样;

<a href="./page.html">Go page</a>

Screenshoot for link in DOM

为此，您需要输入带有完整路径的 URL。但这可能是不可取的。相对论经常使用，尤其是在包含 HTML 内容的设计中。

当我执行以下操作时它会起作用。

<a href="//localhost/a/b/c/page.html">Go page</a>

Turbolinks 并非如此。这是什么原因？我需要做任何调整吗？谢谢。

我的 index.html

<!DOCTYPE html>
<html>
<head>
  <Meta charset="utf-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SWUP INDEX</title>
  <link rel="stylesheet" href="">
  <script src="swup.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script src="1.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>

  <div id="swup">

    <h1>INDEX</h1>
    <a href="/page.html">Go Page</a>
  </div>

  <script type="text/javascript">
    var options = {
      LINK_SELECTOR: 'a',FORM_SELECTOR: 'form[data-swup-form]',animationSelector: '[class^="a-transition-"]',cache: true,pageClassprefix: '',scroll: true,debugMode: true,preload: true,support: true,disableIE: false,skipPopStateHandling: function(event){
        if (event.state && event.state.source == "swup") {
          return false;
        }
        return true;
      },}
    var swup = new Swup(options);
  </script>


</body>
</html>

我的页面.html

<!DOCTYPE html>
<html>
<head>
  <Meta charset="utf-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SWUP PAGE</title>
  <link rel="stylesheet" href="">
  <script src="swup.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="2.css">
    <script src="2.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>

  <div id="swup">

    <h1>PAGE</h1>
    <a href="/index.html">Go Index</a>
  </div>

  <script type="text/javascript">
    var options = {
      LINK_SELECTOR: 'a',}
    var swup = new Swup(options);
  </script>
  

</body>
</html>

解决方法

尝试插入而不是 (LINK_SELECTOR: 'a')

linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]),a[href^="/"]:not([data-no-swup])',
javascriptrelative-urlswup