是否可以从HTML文件中的特定脚本标记引用函数或对象

Question

Imagine we have the following code in an HTML file:

<script id='tag-1'>
  function foo(){
    alert("this is foo-1");
  }
</script>

<script id='tag-2'>
  function foo(){
    alert("this is foo-2");
  }
</script>

<script id='tag-3'>
  function foo(){
    alert("this is foo-3");
  }
</script>

Is it possible to invoke function foo from the script tag with id tag-2 ? I'm just curious to know if there is any cross-browser solution? Thank's guys.

---

Ok we have two very relevant proposals - the one that I marked for accepted answer and another one of the comments rigth below this post - the one that @dfsq propose. Thank you all guys!!!

Answer 1

No, that's not possible without resorting to eval() .

As each script block is evaluated by the browser the previous versions of the function are overwritten.

You can access the text context of each <script> tag, but only if it's inline. Accessing the source of <script src="..."> tags requires AJAX.

Answer 2

Yes this is totally possible, but you should use a type other than text/javascript.

<script id='tag-1' type="myScriptHolder">
  function foo(){
    alert("this is foo-1");
  }
</script>

<script id='tag-2' type="myScriptHolder">
  function foo(){
    alert("this is foo-2");
  }
</script>

<script id='tag-3' type="myScriptHolder">
  function foo(){
    alert("this is foo-3");
  }
</script>

<script>
$.globalEval($('#tag-1').text();
</script>

Answer 3

No, this isn't possible. All Javascript code in the same window shares the same namespace, so what you're doing in your example is simply overriding foo , meaning that in the end you only have "foo-3".

iframes each have their own namespace but it wouldn't make sense to use iframes for something like this.

If the functions are only needed by their corresponding scripts, then you could wrap each script in a self-executing function, eg

(function() {
  function foo(){
    alert("this is foo-1");
  }
})();

This would mean that foo would be inaccessible from outside that script, which obviously may or may not work for you depending on where the function is used.

The only other alternative would be to create your own namespaces for the functions, eg:

var namespace1 = {};
namespace1.foo = function foo() {...}

Answer 4

Javascript doesn't have function overloading. Every next declaration with the same name(variable or function) just re-declares it with new value provided. So in your case function from tag-3 will always be executed.

Possible solution to what you want is
1. Give different names for each function.
or
2. If you are expecting functions to be called differently depending on arguments provided. You can check the implicit arguments object inside the function and do necessary operations depending upon that.

Simple example of the second solution can be given as follows.

function foo(bar){
    if(typeof bar==="number"){
         //Do number specific stuff here
    } else if(typeof bar==="string"){
        //Do string specific stuff here
    } else {
    }
}

Answer 5

You could implement a javascript namespacing technique that is fairly common. This creates a new javascript object that is available, and you can reference via calls to CodeGuru.File1.Foo();

var CodeGuru = CodeGuru || {};  
var CodeGuru.File1 = CodeGuru.File1 || {};
(function(CodeGuru) {
    CodeGuru.File1.Foo = function() {
        //insert code
    }
 })(CodeGuru);

Answer 6

How about something like this:

if (typeof (GenLib) == "undefined") GenLib = {};

    GenLib.Tag1 = {};
    GenLib.Tag2 = {};
    GenLib.Tag3= {};

    GenLib.Tag1.Foo = function () {
        alert("this is foo-1");
    };

    GenLib.Tag2.Foo = function () {
        alert("this is foo-2");
    };

    GenLib.Tag3.Foo = function () {
        alert("this is foo-3");
    };

    var theOneYouWantNow = GenLib.Tag2; // Or Tag1 or Tag3, use if/switch/whatever here.

    theOneYouWantNow.Foo();