代码之家  ›  专栏  ›  技术社区  ›  Chris

Javascript src以//?开头?[复制]

  •  0
  • Chris  · 技术社区  · 15 年前

    我有以下要素:

    <script type="text/javascript" src="https://cdn.example.com/js_file.js"></script>
    

    在本例中,站点是HTTPS,但是站点也可能只是HTTP。(JS文件在另一个域中。)为了方便起见,我想知道是否可以执行以下操作:

    <script type="text/javascript" src="//cdn.example.com/js_file.js"></script>
    

    我想知道是否可以删除 http: https: ?

    它似乎在我测试过的任何地方都有效,但有没有不起作用的情况呢?

    0 回复  |  直到 11 年前
        1
  •  389
  •   TRiG    13 年前

    没有方案(http:或https:)的相对URL有效,每 RFC 3986: "Uniform Resource Identifier (URI): Generic Syntax", Section 4.2

    你的例子是有效的,应该是有效的。我自己也曾在流量很大的网站上使用过这种相对网址方法,而且没有任何投诉。此外,我们在Firefox、Safari、IE6、IE7和Opera中测试我们的网站。这些浏览器都能理解URL格式。

        2
  •  153
  •   Andrew Moore    15 年前

    RFC 3986 定义由以下部分组成的URI:

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment
    

    定义相对uri时( Section 5.2 ),您可以省略这些部分中的任何一个,始终从左侧开始。在伪代码中,如下所示:

     result = ""
    
      if defined(scheme) then
         append scheme to result;
         append ":" to result;
      endif;
    
      if defined(authority) then
         append "//" to result;
         append authority to result;
      endif;
    
      append path to result;
    
      if defined(query) then
         append "?" to result;
         append query to result;
      endif;
    
      if defined(fragment) then
         append "#" to result;
         append fragment to result;
      endif;
    
      return result;
    

    您描述的URI是一个无模式的相对URI。

        3
  •  80
  •   Thilo    13 年前

    有没有不起作用的情况?

    如果父页是从 file:// file://cdn.example.com/js_file.js 当然你也可以在当地提供)。

        4
  •  41
  •   SLaks    15 年前

    许多人称之为协议相关的URL。

    It causes a double-download of CSS files in IE 7 & 8

        5
  •  26
  •   KennyTM    8 年前

    我把答案复制到 Hidden features of HTML :

    使用独立于协议的绝对 路径:

    <img src="//domain.com/img/logo.png"/>
    

    如果浏览器正在查看 SSL通过HTTPS,然后它将请求 否则它将用HTTP请求它。

    包含安全和非安全 IE中的错误消息,保留 同样的协议。

    <link> 或 @导入样式表IE7和IE8 download the file twice 不过,它的用途还不错。

        6
  •  17
  •   Lightness Races in Orbit    13 年前

    不谈这个协议是完全正确的。多年来,URL规范对这一点已经非常清楚,我还没有找到一个浏览器不能理解它。我不知道为什么这种技术不为人所知;它是解决跨越HTTP/HTTPS边界的棘手问题的完美解决方案。更多信息: Http-https transitions and relative URLs

        7
  •  7
  •   Community CDub    8 年前

    有没有不起作用的情况?

    src="//cdn.example.com/js_file.js" src="file://cdn.example.com/js_file.js" ,这将中断,因为您没有在本地托管此资源。

    Not able to load jQuery in Internet Explorer on localhost (WAMP)

    使用的解决方案 HTML5Boilerplate 是在资源未正确加载时进行回退,但只有在合并检查时才有效:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- If jQuery is not defined, something went wrong and we'll load the local file -->
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
    

    HTML5样板 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 在决定弃用协议相关URL之后,请参阅[此处][3]。

        8
  •  4
  •   Shashank Agrawal    9 年前

    根据gnud的参考 说:

    以方案名称开头,然后将引用解释为 绝对的URI,我们完成了。 从基URI的scheme组件继承 .

    // 正确:-)

        9
  •  3
  •   gnud    15 年前

    是的,记录在 RFC 3986

    (编辑:哎呀,我的RFC参考已经过时了)。

        10
  •  3
  •   jlovison    12 年前

    正如其他答案所述,这确实是正确的。不过,您应该注意到,一些网络爬虫会通过在您的服务器上请求它们来触发404,就像一个本地URL一样。(他们无视双斜杠,把它当作单斜杠)。

    您可能需要在您的Web服务器上设置一个规则来捕获这些并重定向它们。

    例如,使用Nginx,您可以添加如下内容:

    location ~* /(?<redirect_domain>((([a-z]|[0-9]|\-)+)\.)+([a-z])+)/(?<redirect_path>.*) {
      return 301 $scheme:/$redirect_domain/$redirect_path;
    }
    

    另外,对于每个查询来说,这是一个相当庞大的regex——在我看来,惩罚404的不兼容浏览器是值得的,因为大多数兼容浏览器的性能会受到轻微的影响。

        11
  •  3
  •   Lemiarty    11 年前

    导致404的引用如下所示: 裁判:

    <script src="//somedomain.com/somescript.js" />
    

    404请求:

    http://mydomain.com//somedomain.com/somescript.js
    

    不要 遵守RFC 3986第4.2节。最保险的办法是尽可能地包括协议。

        12
  •  3
  •   Саша ЧерныѠ   6 年前

    this technique an anti-pattern

    也:

    1. 某些第三方工具可能不支持它们。

    https:// 那就好了。


    这个答案与2019年1月有关。将来,这个答案的数据可能会过时。


    三。反模式

    3.1条。论证

    front-end engineer and a developer advocate for the Google Chrome write in 2014, December :

    既然SSL是 encouraged for everyone doesn’t have performance concerns , 这种技术现在是一种反模式 https:// 资产。

    recent GitHub Man-on-the-side attack . 请求HTTPS资产总是安全的,即使你的站点是在HTTP上,但是相反 is not true

    3.2条。其他链接


    4开发过程

    clean-console .

    • 示例文件 KiraCleanConsole__cdn_links_demo.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>clean-console without protocol demonstration</title>
        <!-- Really dead link -->
        <script src="https://unpkg.com/bowser@latest/bowser.min.js"></script>
        <!-- Package exists; link without “https:” -->
        <script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
        <!-- Package exists: link with “https:” -->
        <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js"></script>
    </head>
    <body>
        Kira Goddess!
    </body>
    </html>
    
    • 输出:
    D:\SashaDebugging>clean-console -i KiraCleanConsole__cdn_links_demo.html
    checking KiraCleanConsole__cdn_links_demo.html
    phantomjs: opening page KiraCleanConsole__cdn_links_demo.html
    
    phantomjs: Unable to load resource (#3URL:file://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js)
    
    
    phantomjs:   phantomjs://code/runner.js:30 in onResourceError
    Error code: 203. Description: Error opening //cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js: The network path was not found.
    
      phantomjs://code/runner.js:31 in onResourceError
    
    phantomjs: Unable to load resource (#5URL:https://unpkg.com/bowser@2.1.0/bowser.min.js)
    
    
    phantomjs:   phantomjs://code/runner.js:30 in onResourceError
    Error code: 203. Description: Error downloading https://unpkg.com/bowser@2.1.0/bowser.min.js - server replied: Not Found
    
      phantomjs://code/runner.js:31 in onResourceError
    
    phantomjs: Checking errors after sleeping for 1000ms
    2 error(s) on KiraCleanConsole__cdn_links_demo.html
    
    phantomjs process exited with code 2
    

    链接 //cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js

    注意 file://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js Thilo bg17aw 关于的答案 file:// .

    我不知道这种行为,也不明白我为什么会有这样的问题 this for pageres


    5第三方工具

    我使用 Clickable URLs 崇高的文本包。使用它,我可以简单地打开链接从我的文本编辑器在浏览器。

    CSS links examples


    6结论

    对:

    1. 如果你有问题 Developing process
    2. 否则你就有麻烦了 Third-party tools 物品,你可以提供工具。

    但你不需要这些额外的问题。按链接阅读信息 Anti-pattern 项:协议相关URL已过时。

        13
  •  2
  •   Shashank Agrawal    9 年前

    我看到的图案 html5-boilerplate

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
    

    它在不同的方案下运行顺利,比如 http , https file .

        14
  •  1
  •   user2246924    7 年前

    由于您的示例是链接到外部域,如果您使用的是HTTPS,那么您应该验证外部域是否也设置了SSL。否则,您的用户可能会看到SSL错误和/或404错误(例如,旧版本的Plesk将HTTP和HTTPS存储在单独的文件夹中)。对于cdn来说,这不应该是一个问题,但对于任何其他网站来说,这可能是个问题。

    另一方面,在更新旧网站时进行了测试,并且还可以在META REFRESH的url=部分中工作。

    推荐文章