2

I have a JavaScript file that embeds a widget on a website. I want to be able to call this widget using a URL of the form:

http://domain.com/widget.js?variable=test

Within the JS script I want to be able to read in the value of the URL parameter 'variable' which is this case is 'test' and use it in the HTML code the JS outputs. I tried using window.location but that is returning the URL of the main webpage and not the URL that is being called to load the script.

Any ideas what the JS code looks like to read in a passed parameter? Thanks in advance!

1
  • does document.location.search or parent.document.URL help? Commented Aug 5, 2010 at 0:08

1 Answer 1

3

Iterate through all <script> elements using getElementsByTagName. Find the one which identifies your script (e.g. by looking for domain.com/widget.js) by examining the src attribute. Extract the query string from the src attribute.

Example:

function getScriptQuery(identifier) {
 var scripts = document.getElementsByTagName('script'),
     i, curScript;

 for (i = 0; i < scripts.length; ++i) {
  curScript = scripts[i];

  if (curScript.src.match(identifier)) {
   return (curScript.src.match(/\?.*/) || [undefined])[0];
  }
 }
}

alert(getScriptQuery('widget.js'));

There are two common alternatives to solving your original problem of passing data to the script.

You can reference a known global variable in your script and have the calling HTML define that variable:

<script type="text/javascript">var MyWidgetData={foo:'bar'};</script>
<script src="http://my.widgeteer.net/widget.js"></script>

// widget.js:

alert(MyWidgetData.foo);

You can also wrap your script as a named function and have calling HTML call that function:

<script src="http://my.widgeteer.net/widget.js"></script>
<script type="text/javascript">MyWidget({foo:'bar'});</script>

// widget.js:

function MyWidget(data) {
    alert(data.foo);
}
Sign up to request clarification or add additional context in comments.

8 Comments

Is that really the easiest way to do this? JavaScript has to have some more efficient way to read the URL that called it. I guess not. If this is the easiest way, I'm not sure what would look like? Could you provide some sample code?
Quick follow up. Is there a better way to pass the parameters instead of the calling URL? Maybe adding them inside a script tag?
@Russell C., Added an example. Anything inside the <script> tags won't be executed if the script specified in the src executes. Similarly, if the src script fails to load, the contents of the <script> element executes. Alternatives to passing arguments in the URL are passing arguments before the script is included (using a global variable) and wrapping your code in a function and having the user call that function with the parameters (preferably a parameter object).
Alternatively, you may consider server-side script generation
@Pumbaa80 - the whole point to why we are doing this is so we can serve static JS files so that won't work for us but good suggestion.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.