Question

Totally newbie about JS.

I need to use an external script which modifies some elements in the current page accessing it as a bookmarklet.

If I modify the html source code of the web page inserting the following < script > lines:

s=document.createElement('script');
s.type='text/javascript';
s.src='script.js';
document.getElementsByTagName('head')[0].appendChild(s);

it works fine. But if I create a javascript: bookmarklet with the same lines, I obtain a blank page with the following string:

[object HTMLScriptElement]

whereas, if I create a bookmarklet adding the line

void(null);

to previous ones, the web page does not disapper but the script is not executed.

Why?

Answer 1

A common practice is to simply use a self-executing function expression, something like this:

(function () {
  var s=document.createElement('script');
  s.type='text/javascript';
  s.src='script.js';
  document.getElementsByTagName('head')[0].appendChild(s);
}());

Bookmarklet:

javascript:(function(){var s=document.createElement('script');s.type='text/javascript';s.src='script.js';document.getElementsByTagName('head')[0].appendChild(s);}());

The function will return undefined (no return value supplied) preventing the navigation.

Note also that this will avoid creating global variables (like s) that can overlap with other variables used on the page, because all variables are created in the scope of the anonymous function.