วิธีแสดง URL ในหน้า HTML

ใน HTML มี URL ทั่วไปมากมาย:

URL สัมพัทธ์:

example.php

demo/example.php

./example.php

../../example.php

/example.php

URL สัมบูรณ์:

http://dancewithnet.com/example.php

http://dancewithnet.com:80/example.php

https://dancewithnet.com/example.php

ในเวลาเดียวกันมีค่าแอตทริบิวต์องค์ประกอบจำนวนมากใน HTML โดยทั่วไปมีสองวิธีในการรับค่าแอตทริบิวต์ URL เหล่านี้โดยใช้ JavaScript:

<a href = example.php id = example-a> ในเวลานี้หน้าเป็น url อย่างแน่นอน http://dancewithnet.com/ </a>

<script>

var OA = document.getElementById ('example-a');

oa.href == 'http://dancewithnet.com/example.php';

oa.getAttribute ('href') == 'example.php';

</script>

เราหวังว่าจะได้รับ URL สัมบูรณ์ที่สมบูรณ์โดยการเข้าถึงแอตทริบิวต์โดยตรงและรับค่าแอตทริบิวต์ดั้งเดิมผ่านวิธี GetAttribute ในความเป็นจริงนี่เป็นผลลัพธ์ที่ค่อนข้างเหมาะ ในบรรดาเบราว์เซอร์ A-Level ทั้งหมด Firefox และ IE8 เท่านั้นที่สามารถรับผลลัพธ์นี้ได้สำเร็จ เบราว์เซอร์อื่น ๆ มีสถานการณ์พิเศษมากขึ้นหรือน้อยลง สำหรับคุณลักษณะเฉพาะขององค์ประกอบที่มีเงื่อนไขประเภทใดโปรดดู ตัวอย่างการสาธิต

ปัญหาในเบราว์เซอร์ส่วนใหญ่คือทั้งสองวิธีส่งกลับค่าแอตทริบิวต์ดั้งเดิมในขณะที่ในแอปพลิเคชันจริงสิ่งที่จำเป็นมักจะเป็น URL ที่สมบูรณ์ การแก้ปัญหาใน "การจัดการกับค่า HREF ที่ไม่มีคุณสมบัติ" นั้นซับซ้อนเกินไป นี่คือวิธีแก้ปัญหาที่ค่อนข้างง่าย มันจะง่ายมากถ้าคุณไม่พิจารณาความแตกต่างระหว่างรหัสเบราว์เซอร์:

<form action = example.php id = example-form>

ในเวลานี้หน้าเป็น URL อย่างแน่นอน http://dancewithnet.com/ </form>

<script>

var oform = document.getElementById ('ตัวอย่าง-ฟอร์ม');

// IE6, IE7, Safari, Chrome, Opera

Oform.action == 'example.php';

oa.getAttribute ('action') == 'example.php';

// โซลูชันทั่วไปเพื่อรับ URL สัมบูรณ์

getqualifyurl (Oform, 'action') == 'http://dancewithnet.com/example.php';

getQualifyUrl = function (oel, sattr) {

var surl = oel [sattr]

od,

bdo = false;

// เป็นเวอร์ชันก่อน 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

พยายาม{

bdo = @_jscript_version <5.8? true: @false;

} catch (e) {

bdo = false;

-

-

// ถ้าเป็น Safari, Chrome และ Opera

if (/a /.__ proto __ == '//' || /source/.test((/a.toString+ ''))

- /^function /( /. test ([]. sort)) {

bdo = true;

-

ถ้า (bdo) {

OD = document.createElement ('div');

-

// ผลลัพธ์ที่ได้จากการดำเนินการ DOM จะไม่เปลี่ยนแปลง

var OA = document.createElement ('A');

OA.href = Oel [SATTR];

Od.AppendChild (OA);

-

od.innerhtml = ['<a href =', surl, '> </a>'] .join ('');

surl = od.firstchild.href;

-

กลับ Surl;

-

</script>

มีบางสิ่งที่น่าสนใจมากขึ้นในเบราว์เซอร์ก่อนประวัติศาสตร์ทั้งสองคือ IE6 และ IE7 ค่าแอตทริบิวต์ที่ได้รับจากสองวิธีในองค์ประกอบ HTML A, พื้นที่และ IMG เป็น URL สัมบูรณ์ โชคดีที่ Microsoft จัดเตรียมพารามิเตอร์ที่สองสำหรับ GetAttribute เพื่อแก้ปัญหานี้และยังสามารถแก้ปัญหาการส่งคืนแอตทริบิวต์ดั้งเดิมสำหรับองค์ประกอบ IFEAM และลิงก์:

<link href = ../../example.css id = example-link>

<a href = example.php id = example-a> ในเวลานี้หน้าเป็น url อย่างแน่นอน http://dancewithnet.com/ </a>

<script>

var oa = document.getElementById ('example-a')

olink = document.getElementById ('example-a');

oa.href == 'http://dancewithnet.com/example.php';

oa.getAttribute ('href') == 'http://dancewithnet.com/example.php';

oa.getAttribute ('href', 2) == 'example.php';

olink.href == 'example.php';

olink.getAttribute ('href') == 'example.php';

olink.getAttribute ('href', 4) == 'http://dancewithnet.com/example.php';

</script>