2012-07-03 9 views
7

<head>タグの外部ファイルを参照せずに、別の ".js"ファイルから外部 ".js"ファイルの関数を呼び出す必要があります。別のJavascriptファイルから1つのJavascriptファイル内の関数を呼び出しますか?

私は動的にそのファイルへのアクセスを可能にする外部「の.js」ファイルを追加することが可能であることを知って、私は

var AppFile = "test/testApp_1.js"; 
var NewScript=document.createElement('script'); 
var headID = document.getElementsByTagName("head")[0]; 
NewScript.src = AppFile; 
headID.appendChild(NewScript); 

しかし...

...そうのようにそれを行うことができます

これは、外部ファイルは非常に完全なファイルを動的に影響を与える不必要があります追加...

$(document).ready(function() 
{...} 

に起動手順を実行するスタンドアローンのファイルする必要があるとして、私には使用されません。また、私は外部ファイルを<head>タグで事前参照することはできません。動的である必要があるからです。 ので、この外部ファイル"test/testApp_1.js"は、文字列変数を返す関数が含まれています...

function setAppLogo(){ 

var LogoFile = "test/TestApp_1_Logo.png"; 

return LogoFile; 
}  

私は、この関数のいずれかへのアクセスを必要とする、または私は外部ファイルにグローバルVARとして文字列を格納することができ...どちらの方法でも問題ありませんが、外部ファイル全体をロードせずにLogoFileの値にアクセスする必要があります。

これで私は数時間困惑してしまったので、どんなアイデアでも大歓迎です。

+0

「」を動的に追加できないのはなぜですか?すべてのJSとCSSとHTMLがロードされるまで、domreadyは起動しません... – Rudie

+0

動的に追加することで、ここで不要なコードを実行することになります。私は、ファイル全体ではなく、このファイルから1つの変数値だけを必要とします。 – user1005240

+0

ファイルの一部を読み込むことができません... XHRでロードしてから結果を 'eval()'することはできますが、そうしないでください。 – Rudie

答えて

0

ajaxを使用してjQueryをロードしてから、適切なajax関数で関連スクリプトを実行すると、ファイルをロードします。

はjQueryのgetScript関数を参照してください:http://api.jquery.com/jQuery.getScript/

$(document).ready(function(){ 
$.getScript("http://domain.com/ajax/test.js", function(data, textStatus, jqxhr) { 
    console.log(data); //data returned 
    console.log(textStatus); //success 
    console.log(jqxhr.status); //200 
    console.log('Load was performed.'); 
    //run your second script executable code here 
}); 
}); 
+2

OPは、 "フルファイルを動的に追加することで望ましくない影響がある"と言いました。これは、ヘッダーにスクリプトを追加するのとまったく同じです。 – jbabey

+0

ええ、このコードは、ここで望ましくない効果を持つ完全なファイルを実行します。本当に必要なのは、このファイルに浸漬して、必要な関数を実行するだけです。例えば、myFile.theFunctionINeed();ファイル内の変数、すなわち 'myFile 'の値を取得します。globalVar_1' – user1005240

0

おそらく必要な部分を抽出するために、正規表現を使用して、それを解析、その後(例えば$.get in jQuery)XHRを通じてスクリプト全体をロードすることが可能であると:

$.get('pathtoscript.js', function(scriptBody) { 
    var regex = /function\s+setUpLogo\(\)\s*\{[^}]+}/g; 
    alert(scriptBody.match(regex)[0]); // supposed to output a function called 
             // 'setUpLogo' from the script, if the 
             // function does not have {} blocks inside 
}); 

しかし、このようなアプローチはメンテナンス上の障害を引き起こす可能性が高いことに注意してください。正規表現はJavaScriptコードを解析するのに最適なツールではありません。たとえば、上記の例では、ネストされた{}ブロックを持つ関数を解析しません。これは問題のコードにも存在する可能性があります。

この問題に対するサーバー側の解決策を見つけることをお勧めします。ページがブラウザに送信される前に必要なスクリプトパスまたはその部分を追加します。

+0

私はあなたのアイデアが好きです!ちょっと怒っているけど、うまくいくと思うけど...ファイルを取り込んで目的の関数を解析する関数を書くことができた。全体が涼しいです! :) – user1005240

0

これは良いアイデアだとは思えませんが、iframeを作成してそのウィンドウのオブジェクト内に評価して、望ましくない副作用のほとんどを避けることができます(親にアクセスしようとしないと仮定します)。その後、iframeのウィンドウオブジェクトを介して、必要な関数/変数にアクセスできます。

例:それは信頼できるソースから来る場合

function loadSomeJsInAFrame(url,cb) { 
     jQuery.get(url,function(res) { 
      iframe = jQuery('<iframe></iframe>').hide().appendTo(document.body); 
      iframe[0].contentWindow.eval(res); 
     if(cb) cb(iframe[0].contentWindow); 
    },'text'); 
} 

loadSomeJsInAFrame('test/testApp_1.js',function(frameWindow) { 
    console.log(frameWindow.setAppLogo()); 
    jQuery(frameWindow.frameElement).remove(); 
}); 

これは、ファイル内のsript、ドキュメントと混乱が、そうではないことができないことを保証するものではありません。

また、必要な情報を入手した後でiframeを削除することを忘れないでください。

1

app.jsファイルには、多くの場所から使用したいグローバル変数/値が含まれています。すべてのページにこの.jsファイルを含める必要があります(賢明になり、パフォーマンスを向上させたい場合は、それを縮小/他のjと連結することもできます)。一般に、これらのグローバルは、多くの場所から使用される変数/関数を持つvar APPNAME = { };など、作成するオブジェクトにアタッチする必要があります。

ロードしたい外部 '.js'ファイルと現在使用中の外部 '.js'ファイルは、グローバルAPPNAME変数とそのすべての属性/関数にアクセスし、必要に応じて使用できます。これは、あなたのjavascriptをモジュール化して分離するためのより良いアプローチかもしれません。お役に立てれば。

0

すべての人に感謝します。しかし、私がやろうとしていることは現時点では不可能です。つまり、そのファイルをロードせずに別のファイルから関数にアクセスすることはできません。 しかし私は私の問題の解決策を見つけました。利用可能なアプリケーションの一覧をサーバーに照会して、このリストを使用してUIでアプリケーションを動的に構築します。アプリが選択されると、そのファイルとその中の関数を呼び出すことができます。その複雑さはもう少し複雑ですが、ダイナミックで優れたパフォーマンスを発揮します。ブレーンストーミングにもう一度感謝します! ;)

0

Web Workersの可能性があります。ちょっと離れた環境で注入したかったスクリプトを実行できるので、現在のページを台無しにすることはありません。

あなたが言ったように、setAppLogo"test/testApp_1.js"の中でグローバルになる可能性があるので、私はこの声明に頼ります。あなたは、労働者(worker.js)で、次に

var worker = new Worker('worker.js'); 
worker.onmessage = function (e) { 
    // .... 
}; 

ことができます:あなたは労働者のスクリプトファイルへの参照+は、労働者から来るメッセージを聞く労働者を、作成する必要があり、あなたの元のスクリプトで

ワーカーに外部スクリプトをロードできる特別な機能importScriptsdocs)を使用すると、ワーカーはこれらのスクリプトのグローバル変数も見ることができます。また、カスタムメッセージを元のスクリプトに戻すためにworker内で利用可能な関数postMessageがあります。このメッセージは元のスクリプトに戻って、これらのメッセージ(worker.onmessage)をリッスンしています。 worker.jsのためのコード:

importScripts('test/testApp_1.js'); 

// "setAppLogo" is now available to worker as it is global in 'test/testApp_1.js' 

// use Worker API to send message back to original script 
postMessage(setAppLogo()); 

それはあなたがあなたのリスナーにsetAppLogoの結果を得るでしょう呼び出す:

worker.onmessage = function (e) { 
    console.log(e.data); // "test/TestApp_1_Logo.png" 
}; 

この例では、しかし非常に基本的なものは、WebワーカーAPIと可能性についての詳細をお読みください落とし穴

関連する問題