[英]Execute javascript on href page
我正在做更大的事情，但是我將繼續為我的問題提供一個更簡單的例子。
假設我有兩個html頁面。 在第一頁上，我有三個錨標簽，所有這些錨標簽都鏈接到第二頁。
<a href="nextpage.html"> You clicked Red </a>
<a href="nextpage.html"> You clicked Blue </a>
<a href="nextpage.html"> You clicked Yellow </a>
第二頁只有一個空的paragraf。
當您單擊第一頁上的三個鏈接之一並轉到第二頁時，第二頁應該包含相應單擊的<a>標記的文本。
我已經在.js文件中編寫了這樣的javascript（Jquery）代碼，並包含在兩個頁面的<head>中：
$(document).ready(function() {
$('a').click(myFunction);
});
function myFunction() {
var text = $(this).text();
$("p").html(text);
}
上面的代碼應該可以工作，但不幸的是它不能。 我在console.log中運行了一個測試，單擊鏈接並指向2nd時得到的結果是不確定的。 我不知道為什么會這樣，因為我在兩個頁面上都包含了javascript文件，並且應該彼此通信。
undefined this是javascript中的關鍵字 ，可以根據位置和調用方式來引用幾件事。
$(literally anything at all)是圍繞內部內容的jQuery包裝器。
就您而言， this關鍵字周圍有一個jQuery包裝器。 this是指它內部的功能，即myfunciton 。
一旦在jQuery包裝器中包裝了一些東西，jquery就會添加一堆自己的函數，例如text() ， html() ， slideDown()等。
如果傳遞給jquery包裝的任何內容都具有textnode ，則text()函數將返回該節點的文本。 但是，您傳入了myfunction ，它沒有文本節點。
因此， $(myfunction).text()是undefined 。
您必須以某種方式將所需的值傳遞到下一頁作為請求的一部分。 有人建議使用瀏覽器的localstorage 。 你可以做到的。 或者，您可以將值作為url參數傳遞。
如果您訪問www.example.com/?foo=bar則在加載該頁面時，您將可以訪問具有值bar的foo變量。
了解這一點之后，您可以編寫一個jquery函數，將url參數添加到您的<a>標記中，以便您的標記看起來像這樣：
<a href="nextpage.html?variable=myspecialvalue">Whatever</a>
或者，如果這不是一個詳盡的過程，則可以在模板中手動更改href值。
您的問題是，就瀏覽器而言，第二頁對第一頁一無所知。 如果要將顏色傳遞給下一頁，則需要將其作為參數提供給下一頁（例如，查詢字符串）。 例如
<a href="nextpage.html?col=red"> You clicked Red </a>
<a href="nextpage.html?col=blue"> You clicked Blue </a>
<a href="nextpage.html?col=yellow"> You clicked Yellow </a>
然后使用類似以下的內容來獲取查詢字符串並顯示顏色（getParameterByName的源）： https ://stackoverflow.com/a/901144/3713362：
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var colour = getParameterByName("col")
$("p").text(colour);
正如大家已經說過的那樣，以上代碼將不起作用。 但是，如果您願意使用localStorage，則可以將代碼重寫為
function myFunction() {
var text = $(this).text();
localStorage.setItem('linkText', text);
}
在新頁面上，從localStorage中讀取數據localStorage.getItem('linkText');
它不應該工作。 在其中分配了“ p”的html的上下文位於第一頁，而不是第二頁。
您將需要通過html屬性傳遞數據（要在下一頁顯示的文本）。 您可能無需提交表單即可執行此操作，但是這里有一個示例。
您可以將表單設置為不可見的樣式（如果確實不是您想要的樣式），但是答案是您需要將信息作為屬性傳遞。
您可以通過以下查詢字符串傳遞anchor元素的值：
$('a').on('click', function(){
var param = $(this).text();
window.location.href = 'nextpage.html?pVal=' + param;
});
然后，在相應的下一頁上：
$(document).ready(function(){
var qString = window.location.href.slice(window.location.href.indexOf('=') + 1);
$('p').text(qString);
});
在將通過單擊 href javascript 打開的頁面上執行腳本
[英]execute script on the page that will open by clicking href javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.