简体   繁体   English

加载CDN上托管的JS库的本地版本

[英]Load local versions of the JS libraries hosted on a CDN

I would like to make an addon that loads my local JS libraries rather than the ones hosted on CDN. 我想制作一个加载程序,加载我的本地JS库,而不是CDN上托管的库。 For example loading my own version of the scripts hosted here https://developers.google.com/speed/libraries/devguide?csw=1#Libraries . 例如,加载我自己的托管在https://developers.google.com/speed/libraries/devguide?csw=1#Libraries的脚本的版本。

One way I have thought is to listen to all requests, like in the following example but I don't know how do I tell the browser to load the local versions of the libraries. 我想过的一种方法是监听所有请求,例如下面的示例,但是我不知道如何告诉浏览器加载库的本地版本。

appAPI.onRequest(function(resourceUrl, tabUrl) {

  if (resourceUrl.match(/.*/)) {
  //Load the local version of the libraries used by the website

  }
});

I have also found something similar to what I want to do in the demo version but I don't know if this is a viable option. 我还发现了与演示版本中类似的操作,但我不知道这是否可行。

appAPI.resources.addInlineJS('Resources/jquery-2.1.1.min.js');

You have the right idea of how to achieve your goal. 您对如何实现目标有正确的想法。 In principle, you can use the appAPI.webRequest.onRequest method to block page resources and inject your own version in its place. 原则上,您可以使用appAPI.webRequest.onRequest方法来阻止页面资源并在其位置插入您自己的版本。 There is a potential side effect such as the page loading scripts out of sequence which can affect its overall functionality. 有潜在的副作用,例如页面加载脚本不正确可能会影响其整体功能。

The following code is provided as-is and is not tested. 以下代码按原样提供,未经测试。 Also note that on Internet Explorer the solution may not work if the local libraries are longer that due to its maximum string length. 另请注意,如果本地库由于其最大字符串长度而更长,则在Internet Explorer上该解决方案可能无法工作。

background.js : background.js

// Monitor page resource requests
appAPI.webRequest.onRequest.addListener(function(details, opaque) {\
    // Check if the request is for loadable local resource
    for (var i = 0; i < opaque.resource.length; i++) {
        if (details.requestUrl.indexOf(opaque.resource[i].src) !== -1) {
            // Load local resource
            appAPI.resources.addInlineJS(opaque.resource[i].local);
            // Block original request
            return {
                cancel: true
            };
        }
    }
}, {
    resource: [ // List of loadable local resources
        {
            src: '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
            local: 'local/jquery-2.1.1.min.js'
        }
    ]
});

[ Disclosure : I am a Crossrider employee] [ 披露 :我是Crossrider员工]

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CDN托管了javascript库vs下载和缩小 - CDN hosted javascript libraries vs downloaded and minified HTML if语句,用于在CDN失败时加载本地JS / CSS - HTML if statement to load local JS/CSS upon CDN failure Google CDN服务器托管本地托管的VS. - Google CDN servers hosted libraries VS locally hosted 在Require.js优化期间如何使用本地文件,但在运行时如何使用CDN托管的版本? - How can I use a local file during Require.js optimisation, but a CDN-hosted version at runtime? 如何在创建VueJS实例之前加载外部托管(CDN)JS库*? - How do I load an externally hosted (CDN) JS library *before* the VueJS instance is created? 如何选择 CDN 来加载 Javascript 和 CSS 库? - How to choose a CDN to load Javascript & CSS libraries? 不使用公共 CDN 加载 Javascript 库有什么好处吗? - Is there a benefit to NOT using a public CDN to load Javascript libraries? RequireJS不适用于具有CDN托管库(jQuery)的多页项目 - RequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery) 如何在ng-boilerplate中包含CDN托管的库? - How to include CDN-hosted libraries with ng-boilerplate? 需要JS,无法通过CDN加载库 - Require JS, Loading Libraries through CDN fails
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM