Question

我过去常常像Facebook tells us to do it：

那样注入Facebook SDK

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

过去工作正常，它加载：

https://connect.facebook.net/en_GB/all.js

但我现在改变了我的项目以使用webpack，该解决方案不再有效。现在，当代码运行时，它会在我的页面中添加一个新的<script>标记（就像之前一样）：

<script id="facebook-jssdk" src="//connect.facebook.net/en_GB/all.js"></script>

但是，如果我在浏览器中检查网络选项卡，而不是请求：

https://connect.facebook.net/en_GB/all.js

它正在请求：

数据：应用/ JavaScript的; BASE64，RkI9e2dldExvZ2luU3RhdHVzOmZ1bmN0aW9uKCl7fSxhcGk6ZnVuY3Rpb24oKXt9LHVpOmZ1bmN0aW9uKCl7fSxFdmVudDp7c3Vic2NyaWJlOmZ1bmN0aW9uKCl7fX0sVUlTZXJ2ZXI6e30sWEZCTUw6e3BhcnNlOmZ1bmN0aW9uKCl7fX0saW5pdDpmdW5jdGlvbigpe30sX19ub1N1Y2hNZXRob2RfXzpmdW5jdGlvbigpe319Ow ==

这是该代码的base64：

FB={getLoginStatus:function(){},api:function(){},ui:function(){},Event:{subscribe:function(){}},UIServer:{},XFBML:{parse:function(){}},init:function(){},__noSuchMethod__:function(){}};

这显然不是我想要的，我的fbAsyncInit函数从未被调用过。我不知道webpack如何干扰这一点，动态注入脚本标签不应该与webpack有任何关系。我虽然使用webpack dev服务器插件，也许它正在拦截请求？无论如何添加webpack并开始使用webpack dev服务器是我唯一改变的事情。

Answer 1

最初我认为Webpack Dev Server以某种方式拦截了请求，但最终它是一个拦截它的浏览器扩展（Ghostery）。如果您遇到同样的问题，请尝试禁用扩展程序。

使用Webpack动态注入脚本标记

1 个答案: