Monday, November 24, 2014

Executing Javascript on Various Web Pages

Option 1: Execute via Drag and Drop

  • Open a webpage in Google Chrome
  • Highlight the code below and drag it onto the Tab just opened:
    javascript:alert('Hello World');
Note: This method works well for a one click execution of your code. This allows demos directly from a tutorial or documentation page.
Note: This may not work in Firefox but depends on the browser configuration for javascript.
Note: This link may also be dragged into the Firefox Bookmarks Menu or the Google Chrome Bookmarks Toolbar.
Note: Instead of dragging the whole javascript code, you may also drag a hyperlink like this: Hello World Bookmark. This was created from the following html:
<a href="javascript:alert('Hello World');">Hello World Bookmark</a>

Option 2: Execute via Address Bar

  • Open a webpage in Google Chrome
  • Type the following into the address bar:
    javascript:alert('Hello World');
  • Press Enter
Note: This may not work in Firefox but depends on the browser configuration for javascript.
Note: When copying this code, make sure that the prefix "javascript:" is copied. In some cases, this will have to be manually typed.

Option 3: Execute via Console

  • Open a webpage in Google Chrome or Firefox
  • Right click the page, Inspect Element
  • Switch to the Console Tab
  • Type the following code:
    javascript:alert('Hello World');
  • Press Enter
Note: Accessing the console will vary depending on the browser and plugins. However, in most cases you need the previx "javascript:".

Option 4: Execute via Bookmark

  • Open a webpage in Google Chrome or Firefox
  • Go to the Bookmark Menu and select the Bookmark
Note: Option 1 above shows how to create a new bookmark via drag and drop. However, below are instructions on how to manually create a Bookmark which will execute javascript code.

Manually Creating a Bookmark

  • Open a webpage in Firefox
  • From the Bookmark Menu, Bookmark This Page
  • From the Bookmark Menu, Right Click the new Bookmark, Properties
  • Change the Name to "Hello World Bookmark"
  • Change the Location to "javascript:alert('Hello World');"
  • Save the bookmark
Note: Similar directions will work in Google Chrome.

Hosting Your Javascript Code

For more complicated javascript, I suggest hosting the main javascript code on a server. This requires a few pieces:
  • Executing the following javascript code through one of the options previously mentioned on this page:
    javascript:addScript=function(){s=document.getElementById("bmScript");if(s){document.body.removeChild(s);}s=document.createElement("script");s.id="bmScript";s.src="http://localhost:8080/HelloWorld.js";document.body.appendChild(s);};void(addScript());
  • Placing the javascript code on the server (for example, if using Tomcat as a server, the above javascript code assumes a file HelloWorld.js is placed in the ROOT Tomcat directory)
  • Running a server somewhere (for example, if using Tomcat as a server, the above javascript code assumes a Tomcat server is running on the same machine which is executing the code so that localhost:8080 is available)
Note: The javascript here, which will be executed on the page adds a script element to the page. When the script element is added, it will also be loaded. At this point, the src found on the server will be executed as well.

No comments:

Post a Comment