Encoding URL vars in HREF versus onclick using JS window.location - javascript

I don't know why this link does not work, but I have a Javascript redirect (window.opener.location) that I am passing a number of variables through the URL and am having issues when those variables contain apostrophes. I am using URLENCODE() in PHP to build the link, which looks like it is doing what I need when I dump the source, but Safari and Chrome both throw "Unexpected identifier at 'www'" errors when I click the link.
This seems to tell me that the JS link is still being treated as if it has an apostrophe instead of the %27 equivalent of an apostrophe? I am using a dummy name "qqq'www qqq'www" with apostrophes in first and last name for my testing to break as much stuff as possible.
Here is the link I am having trouble with:
<em>Yes</em>
But if I change the link to use onclick instead of the HREF, it works? I realize this is the better coding method than href='javascript:...' too.
<em>Yes</em>
Everything is identical except where I make the JS call. Is this possibly due to the way the HREF and onclick are handled on encoding/decoding? Maybe the HREF is un-encoding the apostrophes prior to making the link call because the JS is embedded in the HREF call?
Any insight into this behavior would be appreciated so I can better understand what is really going on here. Yes it works, but not knowing why makes me feel like a worse developer...
Thanks!

Your links do not have a > to end the starting <a - and yes, do not use href="javascript:
Also if you need to encode, use encodeURIComponent and lastly do not try to close the window before changing the opener.
But why not name the opener and user a target and a setTimeout?
<a target="nameOfOpener"
href="../cust/maint_cust.php?action=del_are_you_sure&cust_id=249735&lname=Qqq%27www&fname=Qqq%27www"
onclick="setTimeout(function() {top.close()},100)"><em>Yes</em></a>

Browsers give a special treatment to href attributes starting with 'javascript:'. Any %xy encoding, as in your case the %27, will be decoded first before executing the Javascript code. I checked this for current versions of Firefox and Chrome. I would be curious to find a documentation of this feature.
The short answer is: Do not use 'javascript:' in a href, if your Javascript code contains %xy encodings.
In case you really have to use 'javacript:' in a href, put your URL into a javascript variable and then reference that variable in your href's Javascript code.
<script>
myURLwithEncodings = "../cust/maint_cust.php?action=del_are_you_sure&cust_id=249735&lname=Qqq%27www&fname=Qqq%27www";
</script>
<em>Yes</em>

Related

Why use `javascript:` before function call?

I have seen at many locations that people use javascript: before functions(classes) or using attributes? E.g., javascript:Blob, javascript:void(0).
I'm wondering what are the situation when using this notation can be necessary?
Or what're the best practices regarding using or not using this?
Expanding scope of my question:
Can it be useful to use it without href. I.e., in JS file directly?
Does ECMAScript have to do anything with it?
"javascript:" is a URL protocol. When the browser loads a javascript: URL, it takes the rest of the URL as JavaScript code and executes it. Thus, you can put this in an href attribute on an <a> tag.
It's generally better to not do this, though - instead, you can set href='#' and put your JS code in the onclick attribute. (Some recommend setting href='javascript:void(0)', which is similar but subtly different. See here.)
This is usually used for HTML a tag HREF's ie LINK TEXT

IE limits to 2083 chars when using get method to call a javascript function

I'm trying to pass a long string of xml to a javascript function. Currently the call works something like this, I have an xsl file that generates the html code and in the code it generates a link that does this.
My Link
I know that using the post method would get around the limit by IE of 2083 characters but am not sure on the best way to go about it.
It's possibly due to IE's URL length limit, which is affecting you because the script is in the href attribute. You could try changing it to:
My Link
You may need to return false from your function and/or do some other stuff in order to prevent the default click event.
Alternatively you can move your Javascript out into a separate area and bind a function to the onclick property of the link from there.
This post my help you
http://bytes.com/topic/javascript/answers/790925-overcomming-ies-2083-byte-url-restriction

Html/Javascript - How to make an html link display a url, and have it actually be redirected to a javascript function?

I have an html page, and I need a link to show that the user would be going to 'example.html', when really, the link goes to 'javascipt:ajaxLoad(example.html);'.
I tried this:
Example
But it didn't work. Any help? I already asked the webmasters stackexchange, and they told me that this would be a javascript programming question. Not an html question.
Example
By returning false you prevent the default action. And this way the links will still work when javascript is disabled, but then you don't get the AJAX functionality.
Just point the href at the actual file. The javascript onclick will take precedence - as long as you take care to disable the actual click effect by doing a "return false" or similar, the status bar will show 'example.html' and not the javascript url.
As well, note that it should be javascript:... (you're missing an r). The onwhatever attributes are already assumed to be javascript, so you could just say onclick="ajaxLoad(...) anyways.
Look, I'm not sure if I got exactly what you're asking about here, but the following fix often works with me. Just change the double-quotes to single-quotes, and put double-quotes around the example.html part
<a href="example" onclick='javascipt:ajaxLoad("example.html");'>Example</a>

When is "javascript: ..." needed?

Is the javascript: prefix really needed? I know you should aim for unobtrusive JavaScript but under what circumstances would something break if it is not there?
javascript: is a URI scheme.
It is needed to create a URI that runs Javascript, either in an href="" attribute or in the browser address bar.
There is never a situation in which javascript: is optional.
Best practices indicate that javascript: URIs should be avoided where possible in favor of click handlers, so its use is frowned upon.
However, there are cases where there is no alternative. For example, bookmarklets can only be created by using javascript:.
They're "needed" if you are encoding Javascript code into an URI, for example in the href property of an <a> tag.
They're bad practice, though.
If you put JavaScript code into the href attribute of an a, or other attribute which takes a URL, then it's required for the browser to detect that it is JS. It's not necessary (and may not even work) if you use it with onclick or other attributes that already expect JS code.
That "prefix" is used only in the href attribute of an html anchor (). It is never actually needed, since you could as well define a click event handler.
It is needed even in onclick situations if you also have a VBS routine on the same page.

What is href=javascript:;

in a code which i am goin through there is a link has href=javascript:; in code.when it is clicked it opens a lightbox to show some msg with close button.how is it done.I think this uses dojo
The code:
..
will actually do nothing. Generally this Nothing link allows some javascript code to use the onclick event instead. The onclick event triggers the window which may be from django or jquery or wherever.
EDITED:
i have just added this link that explane you how dojo work with onlclik event:
Dojo, how to do onclick event on a DIV
ok, just for the sake, all the answer here are good answer, in your particular case if you are using Dojo
the <a href="javascript:;" > simply prevent your <a> tag to jump around when clicked and of course have no action!
probably you have something like this in your code:
<a href="javascript:;" id="some" class="some_too" rel="some_too_too">
Dojo simply keep the <a> id OR class OR rel tags and execute the function!
href="javascript:somefunction();" is just a way to point to a function of some javascript code.
You can also do: href="#" onclick="somefunction();return false;"
Nothing really dojo about it. All it does is call the function or javascript code. It just tells the element to use javascript.
or href="javascript:void(0);" onclick="somefunction();" as stated already.
It's known as the javascript pseudo-protocol. It was designed to replace the contents of the document with a value calculated by JavaScript. It's best not to use it, for several reasons, including:
If JavaScript is disabled, you have a link that goes nowhere
If your JavaScript returns a value, the contents of the page will be replaced by that value
More reasons why you shouldn't use it
<a href="javascript:void(0)" onClick="callFunction();">
Call callFunction() method onClick
this can also be used as foollows
<a href="javascript:callFunction();">
<a href="#" onClick="callFunction();">
this also call javascript callFunction() method but it adds # in your URL to Avoid this Use
<a href="javascript:void(0)" onClick="callFunction();">
I believe this just indicates that your link is going to perform some javascript function. Usually you couple this by hooking up events on the link e.g. OnClick/OnMouseMove
All this does is make a call to a Javascript function which executes some Javascript. Maybe posting the code as an example helps.
Supposedly, it's a URL to a resource that's reachable via the "javascript" protocol, just like you can have "http:" or "ftp:". I don't know if it's an actual standard but most browsers understand that the URL must be fed to the JavaScript interpreter. So, in practice, you can use it to have JavaScript code that's triggered by a link, e.g.:
Say hello
Of course, writing your JavaScript code inside HTML tags is neither clean nor mantainable. But the possibility exists.
What about href="javascript:;"? If you pay close attention, you'll realise that ";" is a JavaScript code snippet that, well, does nothing. That's the point. This is often used to have a link that points nowhere. The main purpose is that clicking on it triggers JavaScript code defined somewhere else (via onclick event handlers).
Last but not least, you often see stuff like onclick="javascript:doStuff()". The onclick HTML attribute expects Javascript code, not a URL. In this situation, the javascript: prefix is totally superfluous. However, the code still runs. It happens to be a label in JavaScript syntax just by chance ;-)

Categories

Resources