จะใช้ลิงค์เพื่อเรียกรหัส JavaScript ได้อย่างไร
จะใช้ลิงค์เพื่อเรียกรหัส JavaScript ได้อย่างไร
คำตอบ:
<a onclick="jsfunction()" href="#">หรือ
<a onclick="jsfunction()" href="javascript:void(0);">แก้ไข:
คำตอบข้างต้นนั้นไม่ใช่ทางออกที่ดีจริงๆหลังจากเรียนรู้มากเกี่ยวกับ JS ตั้งแต่ฉันโพสต์ครั้งแรก ดูคำตอบของ EndangeredMassaด้านล่างสำหรับวิธีการที่ดีกว่าในการแก้ปัญหานี้
JavaScript ไม่สร้างความรำคาญไม่มีการพึ่งพาไลบรารี:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>hrefถ้าฉันไม่ต้องการเปลี่ยนเส้นทางผู้ใช้และเพียงแค่ต้องการเรียกใช้รหัสบางอย่าง? แก้ไข: href=""ฉันเห็นว่ามันสามารถมีช่องว่างด้านซ้าย:
onclickกิจกรรมผ่านwindow.onloadแทนที่จะใส่onclickโดยตรงใน<a>แท็ก?
<a href="javascript:alert('Hello!');">Clicky</a>แก้ไขหลายปีต่อมา:ไม่! ไม่เคยทำเช่นนี้! ฉันยังเด็กและโง่!
แก้ไขอีกครั้ง:มีคนถามว่าทำไมคุณไม่ควรทำเช่นนี้ มีสองเหตุผล:
การนำเสนอ: HTML ควรเน้นที่การนำเสนอ การวาง JS ไว้ใน HREF หมายความว่า HTML ของคุณเป็นแบบนี้แล้วจัดการกับตรรกะทางธุรกิจ
การรักษาความปลอดภัย:จาวาสคริปต์ใน HTML ของคุณเช่นที่ละเมิดนโยบายความปลอดภัยของเนื้อหา (CSP) Content Security Policy (CSP) เป็นเลเยอร์ความปลอดภัยที่เพิ่มขึ้นซึ่งช่วยในการตรวจจับและลดการโจมตีบางประเภทรวมถึง Cross-Site Scripting (XSS) และการโจมตีการฉีดข้อมูล การโจมตีเหล่านี้ใช้สำหรับทุกสิ่งตั้งแต่การขโมยข้อมูลไปจนถึงการกำหนดไซต์หรือแจกจ่ายมัลแวร์ อ่านเพิ่มเติมได้ที่นี่
การช่วยสำหรับการเข้าถึง:แท็ก Anchor ใช้สำหรับเชื่อมโยงไปยังเอกสาร / หน้า / ทรัพยากรอื่น ๆ ถ้าเชื่อมโยงของคุณไม่ได้ไปทุกที่มันควรจะเป็นปุ่ม สิ่งนี้ทำให้ง่ายขึ้นมากสำหรับโปรแกรมอ่านหน้าจอเทอร์มินัลอักษรเบรลล์และอื่น ๆ เพื่อตรวจสอบสิ่งที่เกิดขึ้นและให้ข้อมูลที่เป็นประโยชน์แก่ผู้ใช้ที่บกพร่องทางสายตา
href='#'และalert()ในonclick?
และทำไมไม่สร้างความรำคาญกับ jQuery:
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>Javascript ที่ไม่เป็นการรบกวนมีข้อดีหลายประการนี่คือขั้นตอนที่ใช้และทำไมจึงใช้งานได้ดี
ลิงก์โหลดตามปกติ:
<a id="DaLink" href="http://host/toAnewPage.html"> คลิกที่นี่ </a>
นี่เป็นสิ่งสำคัญเพราะมันจะทำงานกับเบราว์เซอร์ที่ไม่ได้เปิดใช้งานจาวาสคริปต์หรือหากมีข้อผิดพลาดในรหัสจาวาสคริปต์ที่ไม่ทำงาน
จาวาสคริปต์ทำงานในการโหลดหน้า:
window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}หากจาวาสคริปต์ทำงานได้สำเร็จอาจโหลดเนื้อหาในหน้าปัจจุบันด้วยจาวาสคริปต์การส่งคืนเท็จจะยกเลิกการใช้ลิงค์ กล่าวอีกนัยหนึ่งการใส่ return return มีผลต่อการปิดการใช้งานลิงค์หาก javascript ทำงานได้สำเร็จ ในขณะที่ปล่อยให้มันทำงานหากจาวาสคริปต์ไม่ทำสำรองข้อมูลที่ดีเพื่อให้เนื้อหาของคุณได้รับการแสดงอย่างใดอย่างหนึ่งสำหรับเครื่องมือค้นหาและถ้ารหัสของคุณแตกหรือดูในระบบที่ไม่ใช่จาวาสคริปต์
หนังสือที่ดีที่สุดในเรื่องคือ "Dom Scription" โดย Jeremy Keith
หรือถ้าคุณใช้PrototypeJS
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>ฉันคิดว่าคุณสามารถใช้onclickเหตุการณ์บางอย่างเช่นนี้:
<a onclick="jsFunction();">ตาม @mister_lucky คำตอบที่ใช้กับ jquery:
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});รหัส Html:
<a id="unobtrusive" href="http://jquery.com">jquery</a>เพียงใช้ javascript: ---- exemplale
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })