web-dev-qa-db-ja.com

外部ファイルをロードして、JSFiddleで最初に実行されるようにするにはどうすればよいですか？

私はJsFiddle here を持ち、Microsoft AJAXを外部のJS/resourceセクションからロードするように追加しました。JSコードがAJAXファイルの読み込みが完了しましたか？

AJAXもロードされないようです。:(

JSFiddleのコードは次のとおりです。

Type.registerNamespace("Tutorial.Chapter1");
Tutorial.Chapter1.Person = function(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
};
Tutorial.Chapter1.Person.prototype = {
        set_firstName: function(value) {
            this._firstName = value;
        },
        get_firstName: function() {
            return this._firstName;
        },
        set_lastName: function(value) {
            this._lastName = value;
        },
        get_lastName: function() {
            return this._lastName;
        },
        _firstName: "",
        _lastName: "",
        displayName: function() {
            alert("Hi! " + this._firstName + " " + this._lastName);
        }
    };
Tutorial.Chapter1.Person.registerClass("Tutorial.Chapter1.Person", null);
javascriptasp.net-ajaxjsfiddle
19
Deeptechtons

「リソースの追加」セクションを開き、外部スクリプトのURLを追加します...

19
Nhaga

JsFiddleの[External Resources]タブは現在、扱いが難しく、使用が不安定です。ここで定義されたリソースは、多くの場合、コードに正しく含まれていません。 JSおよびCSSリソースの自動認識に問題があるようです。この場合、外部リソースは結果のコードのヘッドセクションに追加されません。これは、jsFiddleの結果フレームのソースコードを確認することで確認できます。 MS AJAXリソースは、結果のHTMLコードで単に言及されていないことがわかります。

次のように、リソースのURLにダミー値を追加することで、正しい認識を実際に強制できます（詳細については、–> jsFiddle docs を参照してください）。

...&dummy=.js

以下は、外部のGoogle Maps APIリソースをjsFiddleに追加する方法を示す例です（最後にdummyパラメータに注意してください）。

https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js

残念ながら、MS AJAX URLは、追加のパラメーターが追加されると失敗するため、これは機能しません。

解決策（そして現在、外部リソースをロードする最も安全な方法）は、[外部リソース]タブを完全に回避し、次のようにjsFiddleのHTMLウィンドウの最初の行に外部コードを手動でロードすることです。

<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>

そのメソッドを使用するように変更されたjsFiddleは次のとおりです。 http://jsfiddle.net/rEzW5/12/

実際には多くのことはしませんが（残りのコードの何が問題なのかは確認しませんでした）、少なくともJavaScriptエラーはスローされません。

20
Jpsy

@Jpsyのアプローチは機能していないようです（彼の回答の下にある私のコメントを参照してください）。

私にとって、外部リソースの下にリソースを追加することもできませんでした。 （Firefoxデバッガーによると、リソースが見つかりませんでした）。

JavaScriptコードの外部ビット（私の場合はjquery.backstretch.js）を機能させる唯一の方法は、Googleを使用して、このリソースを使用するFiddleを見つけることでした（そして動作しました）、次にこれをフォークしますFiddleとすべてのコードをコピーしてHTML、CSS、JavaScriptパネルに貼り付けます。

1
clayRay

@clayRay、あなたは絶対にコードの手術を受けました。私の場合はプレーンHTMLで外部ソースに言及することで解決しました

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

[外部リソース]タブを使用しても少しは役に立ちませんでした...

0
Sanje