JSON Object passed to External JavaScript - Cool T

问题:

I was looking at FireBug Lite and saw that they use a pretty cool technique to pass options into an external script file.

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
{
    overrideConsole: false,
    startInNewWindow: true,
    startOpened: true,
    enableTrace: true
}
</script>

I was wondering if anyone know of the name of this technique and where I can find more info about it or how it works. Seems pretty cool. Thanks!

回答1:

It's not an automatic variable-passing-technique as you may think.

All their code does is loop through all the script tags until they find the one which loaded their code (by comparing the src attribute to a regular expression (/(firebug-lite(?:-\w+)?(?:\.js|\.jgz))(?:#(.+))?$/;).

If it finds the tag, it simply gets the .innerHTML of the script tag, and evaluates it.

I guess this (unnamed) techique isn't relevant in the real-world, as we don't have a guaranteed method of finding which script tag refers to our library (especially as it is common for all script's to be combined into one script file on live servers).

Furthermore, I have my doubts over how cross-browser this is; as it certainly doesn't go by the spec, which states:

Having said that (and thought about it): the spec states that the browser shouldn't interpret both. However this isn't relevant with this technique. The browser doesn't have to interpet both, as the content of the script is read in through innerHTML (and even if it did read in the content, it doesn't do any harm anyway). Aslong as the browser conforms to the spec, and loads the URI (which all browsers do), there's no problem! (apart from not knowing/ guaranteeing which script tag your library belongs to).

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.

(i.e., don't interpret both).

回答2:

Further to @Matt's answer, and to clarify my comment:

var doc = Firebug.browser.document;
var script = doc.getElementsByTagName("script")[index];
var url = getScriptURL(script);
var isExternal = url && url != doc.location.href;

try
{
  if(isExternal)
  {
    Ajax.request({url:url, onSuccess:renderProcess, onFailure:onFailure})
  }
  else
  {
    var src = script.innerHTML;
    renderProcess(src)
  }
}
catch(e)
{
  onFailure()
}