文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >脚本无法找到CDN。

问脚本无法找到CDN。
EN

Stack Overflow用户
提问于 2020-06-02 17:49:29
回答 1查看 243关注 0票数 0

我对如何使用类型CDN感到困惑：

我把CDN放在HTML文档的头上，脚本放在正文的末尾，但是我得到了这个错误：(我认为脚本找不到CDN!)为什么？!我是否使用了错误的顺序使用CDN或脚本？

Uncaught : Typed.new不是HTMLDocument的函数。

以下是代码：

我在头标签的开头有CDN：

代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>

身体最末端的剧本是：

代码语言：javascript
复制
<script src="typing.js"></script>

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="rtl">

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
    <!-- Styles -->
    <link href="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/page.min.css" rel="stylesheet">
    <link href="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/style.css" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="http://thetheme.io/thesaas/assets/img/apple-touch-icon.png">
    <link rel="icon" href="http://thetheme.io/thesaas/assets/img/favicon.png">

    <!--  Open Graph Tags -->
    <meta property="og:title" content="TheSaaS">
    <meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
    <meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
    <meta property="og:url" content="http://thetheme.io/thesaas/">
    <meta name="twitter:card" content="summary_large_image">

</head>

  <body data-aos-easing="ease" data-aos-duration="1500" data-aos-delay="0" data-gr-c-s-loaded="true" class="granim-light">

        <a class="btn btn-xs btn-round btn-success" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&amp;open_purchase_for_item_id=19778599&amp;purchasable=source&amp;ref=thethemeio">Buy Now</a>

      </div>
    </nav><!-- /.navbar -->


    <!-- Header -->
    <header class="header text-white h-fullscreen overflow-hidden" style="background-image: linear-gradient(45deg, #667eea 0%, #764ba2 100%);">
      <canvas class="constellation" data-radius="0" width="1536" height="763"></canvas>
      <div class="container position-static">
        <div class="row align-items-center h-100">

          <div class="col-lg-7">


            <h1 class="display-4 fw-500">

              <!-- Built For <span class="typeit fw-400 pl-2" data-typing="Startups, Entrepreneurs, Makers, Developers, SaaS, WebApp" data-type-speed="80">We</span><span class="typed-cursor">|</span> -->

              Built For <span class="type fw-400 pl-2"></span><span class="typed-cursor">|</span>

            </h1>


            <p class="lead mt-5 mb-7 mb-md-9 w-80">

              <strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template powered by Bootstrap 4

            </p>

            <a class="btn btn-xl btn-round btn-success w-200 mr-3 px-6 d-none d-md-inline-block" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&amp;open_purchase_for_item_id=19778599&amp;purchasable=source&amp;ref=thethemeio">Buy Now — $39</a>
            <a class="btn btn-xl btn-round btn-outline-light w-200 px-6" href="http://thetheme.io/thesaas/#section-demo">Explore Demos</a>
          </div>

          <div class="col-lg-5 d-none d-lg-block">
          </div>

        </div>

        <div class="d-none d-lg-block sample-blocks">
          <a href="http://thetheme.io/thesaas/block/cover.html#block-2" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-1.jpg" alt="..." data-aos="fade-up" data-aos-delay="0" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/team.html#block-6" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-2.jpg" alt="..." data-aos="fade-up" data-aos-delay="200" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/cover.html#block-5" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-3.jpg" alt="..." data-aos="fade-up" data-aos-delay="400" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/blog.html#block-1" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-4.jpg" alt="..." data-aos="fade-up" data-aos-delay="600" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/feature.html#block-8" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-5.jpg" alt="..." data-aos="fade-up" data-aos-delay="800" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/feature.html#block-13" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-6.jpg" alt="..." data-aos="fade-up" data-aos-delay="1000" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/shop.html#block-4" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-7.jpg" alt="..." data-aos="fade-up" data-aos-delay="1200" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/feature-text.html#block-3" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-8.jpg" alt="..." data-aos="fade-up" data-aos-delay="1400" data-aos-offset="0">
          </a>

          <a href="http://thetheme.io/thesaas/block/pricing.html#block-6" target="_blank">
            <img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/block-9.jpg" alt="..." data-aos="fade-up" data-aos-delay="1700" data-aos-offset="0">
          </a>
        </div>

      </div>
    </header><!-- /.header -->

<div id="popup-funfact" class="popup p-4 w-300" data-animation="slide-up" data-position="bottom-left" data-autoshow="3000" data-autohide="15000">
  <h6>Fun Fact</h6>
  <p class="mb-0">This is the <mark>most popular</mark> technology template on Themeforest. <a href="https://themeforest.net/category/site-templates/technology?sort=sales" target="_blank">See Proof</a>.</p>
</div>

    <!-- Scripts -->
    <script type="text/javascript" async="" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/f.txt"></script><script async="" src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/analytics.js.download"></script><script src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/page.min.js.download"></script><div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>
    <script src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/script.js.download"></script>

  

<style type="text/css" data-typed-js-css="true">
        .typed-cursor{
          opacity: 1;
        }
        .typed-cursor.typed-cursor--blink{
          animation: typedjsBlink 0.7s infinite;
          -webkit-animation: typedjsBlink 0.7s infinite;
                  animation: typedjsBlink 0.7s infinite;
        }
        @keyframes typedjsBlink{
          50% { opacity: 0.0; }
        }
        @-webkit-keyframes typedjsBlink{
          0% { opacity: 1; }
          50% { opacity: 0.0; }
          100% { opacity: 1; }
        }
      </style>


      <script src="typing.js"></script>
      <script src="./TheSaaS — Responsive Bootstrap SaaS, Startup &amp; WebApp Template_files/f(1).txt"></script>


    </body>

    </html>

​

下面是剧本：

代码语言：javascript
复制
document.addEventListener('DOMContentLoaded', function(){
    Typed.new('.type', {
    strings: ["neighbor", "family", "team", "community"],
    stringsElement: null,
    // typing speed
    typeSpeed: 60,
    // time before typing starts
    startDelay: 600,
    // backspacing speed
    backSpeed: 20,
    // time before backspacing
    backDelay: 500,
    // loop
    loop: true,
    // false = infinite
    loopCount: 5,
    // show cursor
    showCursor: false,
    // character for cursor
    cursorChar: "|",
    // attribute to type (null == text)
    attr: null,
    // either html or text
    contentType: 'html',
    });
});
javascript
html
css
typedjs
EN

回答 1

Stack Overflow用户

发布于 2020-06-02 18:05:34

虽然我从未听说过这个库，更不用说使用它了，但从文档中可以立即看出，您使用它是错误的:它应该是new Typed(...) (使用Typed作为构造函数)，而不是像您现在这样的Typed.new(...)。Typed函数对象显然没有new属性，这解释了所得到的错误。

如果问题是库没有像您想象的那样加载，那么错误将是不同的。那么Typed将是undefined，所报告的错误可能是试图访问undefined的一个属性。实际错误意味着Typed存在，但new属性不是函数(此类错误通常意味着“非函数”值为undefined)。这种区别可能看起来很微妙，但这种推理往往有助于缩小错误的来源。

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

https://stackoverflow.com/questions/62158202

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档