JavaScript not working when embedded via the url bar of browser

Question

I am trying to add this line to the url bar of the browser (my browser is Chrome)

javascript:document.getElementsByTagName("head")[0].innerHTML+="<link rel='stylesheet' type='text/css' href='st1.css'>";

When I press enter, the whole page disappears.

When I check the source code, I can see that the JavaScript was executed, but, the whole content disappears, though the content of the body stays the same in the source code !

Why is that happening?

Maybe the style sheet you're embedding has a rule that is hiding the body? — Pekka
– Pekka, Commented Dec 22, 2012 at 12:21
This works for me: javascript:(function (){}(document.getElementsByTagName("head")[0].innerHTML+="<link rel='stylesheet' type='text/css' href='st1.css'>")); — Pranav 웃
– Pranav 웃, Commented Dec 22, 2012 at 12:32
the new css file contains only a rule to change <td> background style ONLY, and has no rule that modify the body the DOM inspector shows the following : <link rel='stylesheet' type='text/css' href='st1.css'> => added in the head section and the body remains the SAME .. and every thing inside of it is the same, all the content .. — user1283226
– user1283226, Commented Dec 22, 2012 at 12:35
Panav Kapoor , your answer really worked .. thank you .. if you put it in a separate answer .. i'd rate it for you :) — user1283226
– user1283226, Commented Dec 22, 2012 at 12:37

Pranav 웃 · Accepted Answer · 2012-12-22 13:44:53Z

1

The JavaScript you have written returns document.getElementsByTagName("head")[0]

To make sure that there is no return value, change the code to something like this :

javascript:(function(){document.getElementsByTagName("head")[0].innerHTML+="<link rel='stylesheet' type='text/css' href='st1.css'>";}());

edited Dec 22, 2012 at 13:44

answered Dec 22, 2012 at 12:40

Pranav 웃

8,4676 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arunkumar Srisailapathi · Accepted Answer · 2012-12-22 12:24:24Z

0

I guess innerHTML is only for displaying it in the webpage and not for adding anything in the headers.

Precisely you can't use that to do anything in the section.

answered Dec 22, 2012 at 12:24

Arunkumar Srisailapathi

1,1692 gold badges8 silver badges28 bronze badges

2 Comments

Phil Rykoff Over a year ago

Are you guessing or do you know it?

user1283226 Over a year ago

innerHTML has done the task .. and added the css link successfully

Barney · Accepted Answer · 2012-12-22 12:29:39Z

0

You must make sure the statement doesn't return anything — anything that is deemed to be returnable in the expression will be taken as a URL or page content to replace the current page. Te expression += will by default. A good solution is to precede the statement with void such that nothing is returned.

answered Dec 22, 2012 at 12:29

Barney

16.5k5 gold badges66 silver badges80 bronze badges

Collectives™ on Stack Overflow

JavaScript not working when embedded via the url bar of browser

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related