2016-09-18 70 views
1

如何在轉到url之前劫持鏈接標籤並分配帶有鏈接標籤的id的變量?如何在轉到鏈接前爲鏈接標籤的id分配javascript變量

我的HTML代碼

<div id="course" class="row"> 
    <div class="col-md-6"><a href="read.html" id="m1">Course 1</a></div> 
    <div class="col-md-6"><a href="read.html" id="m2">Course 2</a></div> 
<div> 

我的JavaScript代碼

document.getElementById("course").addEventListener("click", courseInfo); 

function courseInfo(){ 

    var selectedCourse = the id of the course selected; 

    //assign to localstorage 
    localStorage.setItem("courseid", selectedCourse); 
    //go to courseinfo.html 
    window.location.href = 'courseinfo.html'; 

} 

我試圖獲得該課程的ID和設置它的本地存儲,以便當courseinfo.html如果將請求ajax並解析課程json格式以填充頁面,則會加載它。

請幫

+2

這不是你應該怎麼做的。而是改變'href'屬性中的URL來包含一個參數,如'read.html?id = m1'。 – trincot

+0

就像在html中添加'courseinfo.html?courseid = 1'一樣嗎?如果可能的話,我如何處理這些'courseinfo.html?courseid = 1'與JavaScript? –

+0

我將使用'onClick'事件來調用執行兩個任務的函數:將鏈接分配給變量,GOTO等。但是請注意,轉到其他頁面會導致完整的上下文刷新,因此您的變量將被丟棄。 – FDavidov

回答

1

你不應該使用localStorage這一點,但只是通過通過URL參數信息:

在第一頁上,把課程代碼在href URL,就像這樣:

<div id="course" class="row"> 
    <div class="col-md-6"><a href="courseinfo.html?courseid=1" id="m1">Course 1</a></div> 
    <div class="col-md-6"><a href="courseinfo.html?courseid=2" id="m2">Course 2</a></div> 
<div> 

沒有JavaScript是需要的工作。

然後接收頁上,捕捉的過程中ID如下:

var courseid = location.search.match(/[&?]courseid=(.*?)(&|$)/); 
if (courseid) courseid = courseid[1]; // get captured group 

// this would output "1" if the URL argument was `courseid=1` 
console.log(courseid); 
0

由於@trincot建議您可以在接收端做到這一點。

但是,如果點擊鏈接時確實需要捕獲點擊鏈接的ID,則需要在鏈接本身上添加事件處理程序,然後使用收到的事件來處理數據,如

var x; 
var links = document.getElementsByTagName("A"); 

for(x in links) { 
    if (links[x] instanceof Element) { 
     links[x].addEventListener('click',doX, false); 
    } 
} 

function doX(e) { 
    alert(e.currentTarget.id); 
} 

請注意,在快速的瀏覽器,該瀏覽器可能不完全完成運行doX之前的頁面被刷新和上下文消失,所以這不是一個很安全的方法做事情,除非你防止使用e.preventDefault的默認操作和自己處理鏈接。