In HTML, common URLs are represented in a variety of ways: Relative URLs: Copy code The code is as follows:example.php demo/example.php ./example.php ../../example.php /example.php Absolute URL: Copy code The code is as follows:http://jb51.net/example.php http://jb51.net:80/example.php https://jb51.net/example.php At the same time, there are a large number of element attribute values in HTML. Generally, there are two ways to obtain these URL attribute values using JavaScript: Copy code The code is as follows:<a href="example.php" id="example-a">At this time, the absolute URL of the page is http://jb51.net/</a> <script> var oA = document.getElementById('example-a'); oA.href == 'http://jb51.net/example.php'; oA.getAttribute('href') == 'example.php'; </script> We hope to get the complete absolute URL by directly accessing the attribute, and get its original attribute value through the getAttribute method. In fact, this is a relatively ideal result. Among all A-level browsers, only Firefox and IE8 can successfully get this result. Other browsers have more or less special cases. Please see the demonstration examples for specific conditions of which element attributes exist. The problem in most browsers is that both methods return the original attribute value, while actual applications often require its absolute URL. The solution in "Dealing with unqualified HREF values" is too complicated. Here is a relatively simple solution. If you don't consider the difference in browsers, the code will be very simple: <form action="example.php" id="example-form"> At this time, the absolute URL of the page is http://jb51.net/</form> Copy code The code is as follows:<script> var oForm = document.getElementById('example-form'); //IE6, IE7, Safari, Chrome, Opera oForm.action == 'example.php'; oA.getAttribute('action') == 'example.php'; //General solution for getting absolute URL getQualifyURL(oForm,'action') == 'http://jb51.net/example.php'; getQualifyURL = function(oEl,sAttr){ var sUrl = oEl[sAttr], oD, bDo = false; //Is it a version before IE8? //http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ //http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx /*@cc_on try{ bDo = @_jscript_version < 5.8 ?true : @false; }catch(e){ bDo = false; } @*/ //If it is Safari, Chrome and Opera if(/a/.__proto__=='//' || /source/.test((/a/.toString+'')) || /^function \(/.test([].sort)){ bDo = true; } if(bDo){ oD = document.createElement('div'); /* //The result of DOM operation will not change var oA = document.createElement('a'); oA.href = oEl[sAttr]; oD.appendChild(oA); */ oD.innerHTML = ['<a href="',sUrl,'"></a>'].join(''); sUrl = oD.firstChild.href; } return sUrl; } </script> There are some more interesting things about these two prehistoric browsers, IE6 and IE7. The attribute values obtained by both methods in HTML elements A, AREA and IMG are all absolute URLs. Fortunately, Microsoft provides a second parameter for getAttribute to solve this problem. At the same time, it can also solve the problem that both methods mentioned above return the original attributes for IFEAM and LINK elements: Copy code The code is as follows:<link href="../../example.css" id="example-link"> <a href="example.php" id="example-a">At this time, the absolute URL of the page is http://jb51.net/</a> <script> var oA = document.getElementById('example-a'), oLink = document.getElementById('example-a'); oA.href == 'http://jb51.net/example.php'; oA.getAttribute('href') == 'http://jb51.net/example.php'; oA.getAttribute('href',2) == 'example.php'; oLink.href == 'example.php'; oLink.getAttribute('href') == 'example.php'; oLink.getAttribute('href',4) == 'http://jb51.net/example.php'; </script> |
<<: Deep understanding of line-height and vertical-align
>>: Some lesser-known sorting methods in MySQL
Dig Introduction: Dig is a tool that queries DNS ...
JSONObject is just a data structure, which can be...
Table of contents url module 1.parse method 2. fo...
Tab bar: Click different tabs to display differen...
Table of contents accomplish: Summarize: Not much...
First, let me give you an example (if you don’t w...
After switching from Vue2's writing style to ...
Achieve resultsImplementation Code html <div&g...
Preface For file or directory permissions in Linu...
I don't know if you have used the frameset at...
The img tag in XHTML should be written like this:...
Preface Samba is a free software that implements ...
Table of contents 1. Install Docker 2. Install Gi...
This article shares the installation and configur...
Preface A requirement I had previously made, to s...