動態注入腳本標記，而使用的WebPack

我用來注入的Facebook SDK正是Facebook的tells us to do it方式：動態注入腳本標記，而使用的WebPack

<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，RkI9e2dldExvZ2luU3RhdHVzOmZ1bmN0aW9uKCl7fSxhcGk6ZnVuY3Rpb24oKXt9LHVpOmZ1bmN0aW9uKCl7fSxFdmVudDp7c3Vic2NyaWJlOmZ1bmN0aW9uKCl7fX0sVUlTZXJ2ZXI6e30sWEZCTUw6e3BhcnNlOmZ1bmN 0aW9uKCl7fX0saW5pdDpmdW5jdGlvbigpe30sX19ub1N1Y2hNZXRob2RfXzpmdW5jdGlvbigpe319Ow ==

這是該代碼的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服務器是我改變的唯一的東西。

來源

2016-09-26 Hoffmann

最初我以爲Webpack Dev Server以某種方式攔截了這個請求，但最終它是一個瀏覽器擴展（Ghostery）攔截它。如果您遇到同樣的問題，請嘗試禁用擴展程序。

來源

2016-09-26 14:25:04 Hoffmann

動態注入腳本標記，而使用的WebPack

回答

相關問題