文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么Swup.js不处理相关链接？

问为什么Swup.js不处理相关链接？
EN

Stack Overflow用户

提问于 2021-02-25 11:34:57

回答 1查看 398关注 0票数 0

我在测试Swup.js

据我所见，它不适用于相对链接。就像这样；

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

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>

我的page.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',
      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>

javascript

relative-url

swup

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-15 10:55:14

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66367705

复制

相似问题

问为什么Swup.js不处理相关链接？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Swup.js不处理相关链接？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Swup.js不处理相关链接？
EN