在href页面上执行javascript答案

【问题标题】：Execute javascript on href page在href页面上执行javascript
【发布时间】：2017-09-17 07:14:53
【问题描述】：

我正在做一些更大的事情，但我会继续提供一个更简单的例子来解决我的问题。

假设我有两个 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>

第二页只有一个空的段落。

当您单击第一页上的三个链接之一并被定向到第二页时，第二页应该包含相应单击的 <a> 标记的文本。

我已经在 .js 文件中编写了这样的 javascript(Jquery) 代码，并包含在两个页面的 <head> 中：

$(document).ready(function() {

  $('a').click(myFunction);
});


function myFunction() {

  var text = $(this).text();  
  $("p").html(text);
}

上面的代码应该可以工作，但遗憾的是它没有。我在 console.log 中运行了一个测试，当我单击一个链接并被定向到 2nd 时得到的结果是未定义的。我不知道为什么会发生这种情况，因为我在两个页面上都包含了 javascript 文件并且应该相互通信。

【问题讨论】：

让我纠正您的一个误解：因为您在两个页面上包含一个 javascript 文件并不意味着它们可以相互通信。
您可能需要在 Get 或 Post 变量中发送您的 <a> 文本，以便您可以从其他页面中获取它。
不，这不起作用，这不是single page app，而是“相同”应用程序的三个不同实例...不幸的是，只是因为您在@987654328 中包含了相同的JavaScript 文件@、page2.html 和 page3.html，这些 html 文件中的每一个都获得了 JavaScript "program" 的“自己的实例”，它包含在 somescript.js 文件中......这就是为什么它是 undefined跨度>

标签： javascript jquery html

【解决方案1】：

为什么你有`undefined`

this 是一个 keyword in 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 值。

【讨论】：

【解决方案2】：

您的问题是因为就浏览器而言，第二页对第一页一无所知。如果要将颜色传递给下一页，则需要将其作为参数提供给下一页（例如查询字符串）。例如

<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);

【讨论】：

【解决方案3】：

正如大家已经说过的，上面的代码将不起作用。但是如果你愿意使用 localStorage，你可以将你的代码重写为

function myFunction() {

  var text = $(this).text();  

  localStorage.setItem('linkText', text);

}

并在新页面上从 localStorage 读取数据 localStorage.getItem('linkText');

【讨论】：

对不起，我忘了提，但我正在寻找不使用 localStorage 的解决方案。
当然，那么你必须使用查询字符串来传递数据..正如前面的答案中已经解释的那样

【解决方案4】：

它不应该工作。您分配“p”的 html 的上下文在第一页，而不是第二页。

您需要通过 html 属性传递数据（要在下一页显示的文本）。您可以在不提交表单的情况下执行此操作，但这里有一个示例。

passing form data to another HTML page

如果确实不是您想要的，您可以将表单设置为不可见，但答案是您需要将信息作为属性传递。

【讨论】：

【解决方案5】：

您可以像这样通过查询字符串传递锚元素的值：

$('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);
});

【讨论】：

为什么你有undefined

回答

为什么你有`undefined`