Home > Developer > JavaScript
A pitfall in the href attribute of the tag in html. The html Tag href
As a result of the company's needs, Xiaocai is currently engaged in app web development. Currently, only ios and android versions are available. Although only these two versions are available, browser compatibility issues must still be considered, because android and ios default browser kernels are different.
First, let's talk about compatibility issues. Suppose there is a URL:
Http://www.kpdown.com/search? Name = Ben Nadel
There is a name parameter behind this URL, but the value of the parameter has a space. Such a link can be accessed directly in the android browser, which is no problem, but accessed in the ios browser, this is an incorrect URL, and an error will be reported!
Therefore, we will think of encoding. for the value of the name parameter, we can use the encodeURIComponent () method to encode it and then splice it to the URL. This ensures security (encodeURIComponent is the js native method, can be used directly ).
Then, we can use the hyperlink as follows:
<A href = "javascript: openURL ('HTTP: // www.kpdown.com/search? Name = Ben % 20Nadel '); "> query </a>
Use the js method of openURL for page Jump (assuming there is an openURL method, which does not involve any decoding operations ).
This code runs normally in android, but an error is still reported in ios. It is indeed encoded. Why not?
See the following code:
1 <a href = "javascript: openURL ('HTTP: // www.kpdown.com/search? Name = Ben % 20Nadel '); "> test href </a> 2 <a href =" javascript:; "onclick =" javascript: openURL ('HTTP: // www.kpdown.com/search? Name = Ben % 20Nadel '); "> test onclick </a> 3 4 <script> 5 function openURL (url) {6/* 7 * test href -- print --> http://www.kpdown.com/search? Name = Ben Nadel 8 * test onclick -- print --> http://www.kpdown.com/search? Name = Ben % 20 Nadel 9 */10 console. log (url); 11} 12 </script>
It can be seen that:"Evil"HrefAttribute.The parameter is automatically decoded when the parameter is passed, while the onclickThe attribute remains unchanged.
Therefore, it is strongly not recommended to use the href attribute of tag a to call js. The onclick method is very scientific, stable, and correct. The href method is intended to jump to the URL, don't use it to execute js. In fact, it is better to bind events, so that the code is better managed and looks neat.
This article seems to be a very small thing, but if you do not realize that it is an href problem, you have to waste a lot of unnecessary time. I hope readers can learn from it ~~~
Use javascript:
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Title> </title>
<Script defer type = "text/javascript">
// Document. getElementById ("a1"). href = "HTMLPage.htm? P. page = "+ document. getElementById (" page "). value;
Document. getElementById ("a1"). href = "HTMLPage.htm? P. page = "+ document. getElementById (" page "). value;
</Script>
</Head>
<Body>
<Input type = "text" name = "p. page" id = "page" value = "$ {p. page}" runat = "server"/>
<A id = "a1"> go </a>
</Body>
</Html>
Html tag <a> what are the other attributes besides the href attribute? How to use it?
Optional attributes
Charset-specifies the character encoding of the target URL.
Coords-coordinates of the specified link.
Href-target URL of the link.
Hreflang-language code specifies the reference language of the target URL.
Name-specifies the name of the anchor.
Rel-specifies the relationship between the current document and the target URL.
Rev-specify the relationship between the target URL and the current document.
Shape (default, rect, circle, poly)-specifies the shape of the link.
Target (_ blank, _ parent, _ self, _ top, framename)-Where to open the target URL.
Type-specifies the MIME type of the target URL.
Standard attributes
Id-a specific id of the element
Class-element class
Title-text displayed in the prompt Tool
Style-inline style Definition
Dir-set the text direction
Lang-set language code
Tabindex-set the Tab order of an element
Accesskey-set the keyboard shortcut for accessing an element
Event attributes
Onfocus-execute the script when the element gets the focus
Onblur-execute the script when the element loses focus
Onclick-execute the script when the mouse is clicked
Ondblclick-execute the script when the mouse is double-clicked
Onmousedown-execute the script when the mouse button is pressed
Onmousemove-execute the script when the mouse pointer moves
Onmouseout-execute the script when the mouse pointer removes an element
Onmouseover-execute the script when the mouse pointer is hovering over an element
Onmouseup-execute the script when the mouse button is released
Onkeypress-execute the script when the keyboard is pressed and loose.
Onkeydown-execute the script when the keyboard is pressed
Onkeyup-execute the script when the keyboard is released
Onclick is not recommended, because if you want to execute a piece of code, the href attribute is not easy to write, and the page may be refreshed due to href, causing loss of some operations.
We recommend that you run the script code as follows:
<A href = "javascript: fun ()"> Click to run... </a>
Javascript: executes a Script program and fun () executes the fun () method. If you want to jump to the page after execution, you can add the jump code to the Script method:
<Script>
Function fun (){
Document. location. href = "2.html"; // click this step and the page is directed to 2.html.
}
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
