2

require.js を使用して、別のドメインからいくつかの html を取得したいと考えています。CORS ポリシーではこれが簡単に許可されないことはわかっています。注:すべての JS および CSS ファイル ( require-cssプラグインを使用した css) が他のドメインから読み込まれるように、Web サーバー ( Access-Control-Allow-Origin "*"およびその他のディレクティブを使用) と require.js を構成しました。予想どおり-htmlをフェッチするだけで問題が発生します。しかし、ブラウザーのネットワーク プロトコルでは、html コンテンツも読み込まれていることがわかります。ただし、このコンテンツは require 関数に渡されません! ブラウザはコンテンツを取得しますが、require.js はそれをパラメータとして提供しません...

私の構成：

requirejs.config({
    baseUrl: "http://some.other.domain/",
    paths: {
        jquery:       'ext/jquery/jquery.min',
        htmlTemplate: 'test.html?', 
        siteCss:      '../css/site'
    },
    shim: {
        htmlTemplate: [
            'css!siteCss'
        ]
    },

    config: {
        text: {                
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    },
    map: {
        '*': {
            text: 'ext/require/text',
            css:  'ext/require/css.min'
        }
    }
});


require(['text!htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate); // prints 'undefined' into the console
});

2 つの注意点:useXhr構成はrequire.js から取得されます。テキスト プラグインはファイル名に「.js」を追加しますが、存在するかどうかに違いはありません。?htmlTemplate パスにa を追加しました。これにより、.jsは URL に追加されず、ブラウザーは html コンテンツをロードしますhtmlTemplate。

私に何ができる？require.js オプティマイザーを使用すると、生成されたファイルにこの問題が発生しなくなることを読みました (ただし、機能します...)。しかし、編集ごとに最適化せずに JS を開発する必要があります。

更新：解決策が1つ見つかりましたが、誰かが「正しい」解決策を提供できれば幸いです。

4

3 に答える 3

0

私は解決策を見つけたと思います。requirejs/text のドキュメント:

そのため、リソースのリクエストが別のドメインにあるとテキスト プラグインが判断した場合、スクリプト タグを使用してリソースの「.js」バージョンにアクセスしようとします。スクリプト タグの GET 要求はドメイン間で許可されます。リソースの .js バージョンは、モジュール値の文字列を返す define() 呼び出しを含むスクリプトである必要があります。

そのため、構成を次のように変更したため、テキストは使用されなくなりました。

requirejs.config({
    baseUrl: "http://some.other.domain/",
    paths:   {
        jquery:       'ext/jquery/jquery.min',
        htmlTemplate: 'test.html', // removed the '?'
        siteCss:      '../css/site'
    },
    shim:    {
        htmlTemplate: [
            'css!siteCss'
        ]
    },
    map:     {
        '*': {
            // removed the text plugin
            css:  'ext/require/css.min'
        }
    }
    // removed the useXhr configuration for the text plugin
});


require(['htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate); // prints '<div>Here I am!</div>' into the console
});

http://some.other.domain/test.html.jsロードされるようになりました。test.html の内容は次のとおりです。

define(function () {
    return '<div>Here I am!</div>';
});

そのため、HTML を少しの JS で囲みました。問題ありません。そして今htmlTemplate、期待される文字列に設定されています。これはもはや純粋な HTML ではありませんが、固定テンプレート (つまり、生成されない) であるため、許容される場合があります。

于 2016-07-13T13:01:13.367 に答える