2015-12-22 15 views
7

私はwebfontloaderがブラウザコンテキスト内でうまく動作しています。今、私はそれがnode.js + jsdomのコンテキストで働くことができるかどうかを確かめようとしています。特にwebfontloaderはnpm moduleとして利用可能です。webfontloaderとnode.js、jsdomを連携させる

私はnode + jsdomが分かりやすい出力を提供しているので、その部分が動作していることがわかります。しかし、Webフォントを有効にするためにwebfontloaderを統合しようとすると、私は元気になります。

ReferenceError: window is not defined

私はwindowを取得することができます:

var WebFont = require('webfontloader'); 

WebFont.load({ 
    google: { 
    families: ['Droid Sans', 'Droid Serif'] 
    } 
}); 

しかし、私はかもしれない、私は次のエラーを取得するよう試みる:基本的に私はあるREADMEに記載されているようにwebfontloaderモジュールを、使用しています

jsdomのオブジェクト:

  // Get the document and window 
      var doc = jsdom.jsdom('<!doctype html><html><body><div id="container"></div></body></html>'), 
       win = doc.defaultView; 

しかし、どうすればいいですかそのコンテキストでwindowとして使用するためにwebfontloaderにを挿入しますか?

たぶん私は私の馬鹿げた姿を見せて、不可能と尋ねています。

+0

あなたはjsdom.env(....)コンテキスト内WebFontをロードしようとしたがありますか? –

+0

あなたは以下の答えを試しましたか? – cviejo

+0

まだありません。申し訳ありませんが、まだチャンスがありませんでした。それは完全に妥当であるように見えます、そして、私は本当にそれを行くことを楽しみにしています。詳細な答えをありがとう。 – drmrbrewer

答えて

1

あなたがそうしない正当な理由がない限り、私はむしろあなたがjsdom.envまたはjsdom.jsdomjsdomwebfontloaderをロードし、いずれかのGoogleでホストされているversionはライブラリをホスト使用したり、それを自分でホスティングお勧めします。あなたが本当に私の知る限りwebfontloaderがパラメータとしてウィンドウを渡すことはできません伝えることができるよう、nodejsコンテキストからwebfontloaderを要求する必要がありますが、あなたはこれを回避することができた場合は

var jsdom = require("jsdom"); 

jsdom.env( 
    '<!doctype html><html><body></body></html>', 
    ['https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js'], 
    function(err, win) { 

     var WebFont = win.WebFont; 

     WebFont.load({ 
      google: { 
       families: ['Droid Sans', 'Droid Serif'] 
      } 
     }); 
    } 
); 

jsdom.envを使用すると、それは次のようになります。ライブラリにいくつかの行を追加するだけで簡単に行えます。

  1. 実行npm install webfontloader
  2. 開く "node_modules/webfontloader/webfontloader.js"
  3. パラメータとしてwindowオブジェクトを取るmodule.exports機能で "webfontloader.js" の内容を囲みます。

ファイルは、この(全体webfontloaderライブラリのソースを貼り付けていない)に似て見ることができる:

module.exports = function(window){ 

    var exportsBackup = module.exports; 

    /* Web Font Loader v1.6.16 - (c) Adobe Systems, Google. License: Apache 2.0 */ 
    (function(){function aa(a,b,c){r ... 

    var loaderObject = module.exports; 
    module.exports = exportsBackup; 

    return loaderObject; 
}; 

私は一時的に、我々はこの方法で複数回のモジュールが必要になることが確実にするために変数にmodule.exportsを保存しませんwebfontloaderライブラリはmodule.exportsオブジェクトを置き換えるためです。

あなたはエラーなしにこのようなライブラリを必要とすることができます

var jsdom = require("jsdom"); 

jsdom.env("https://nodejs.org/", [], function(err, win) { 

    var WebFont = require('webfontloader')(win); 

    WebFont.load({ 
     google: { 
      families: ['Droid Sans', 'Droid Serif'] 
     } 
    }); 

}); 
+0

'webfontloaderを編集する狡猾な提案を使用しています。js'を使用して 'window'をパラメータとして渡すことができるようになりました。これで、Referenceエラーなしで実際に' WebFont.load() '関数を呼び出すことができます。しかし、今ここで説明したのとまったく同じ問題が発生しています:http://stackoverflow.com/q/34163339/4070848 - 言い換えれば、webfontの読み込みは常に '非アクティブ'ブランチに達し、決して正常に読み込まれません。 'jsdom'でwebfontを正常に読み込むことができますか?そして、webfontloaderを試してみると、 'jsdom'にカスタム' userAgent'を渡してみました。 – drmrbrewer

+0

さて、私は見てみましょう。しかし、まず、幸せな新年! – cviejo

+0

ハッピーニューイヤー(ほぼ!)...あるものは新年に、他はかなりありません! – drmrbrewer

関連する問題