将页面 X 的 URL 复制到页面 Y 上的只读文本字段答案

【问题标题】：Copying a URL of page X to a readonly text field on page Y将页面 X 的 URL 复制到页面 Y 上的只读文本字段
【发布时间】：2015-06-29 19:25:20
【问题描述】：

从网页 www.foo.com，用户单击反馈超链接以提交有关某事的反馈。它会打开一个新页面，其中包含要填写的文本字段。例如，我想做的是获取原始页面 www.foo.com 的 URL，以显示在新页面的只读字段中。

这是我目前在反馈页面上的测试代码。

<input id="URL" type="text" name="pageURL" readonly> <script type="text/javascript"> document.getElementById('URL').value = document.location.href; </script>

这显示了反馈页面的 URL，页面 Y，这是我所期望的。

但是我在如何获取页面 X 的 url 上画了一个空白，在这个例子中，www.foo.com 出现在只读中。

我假设我必须在原始页面的代码中做一些事情并将其保留下来。我确实有 CORS 用于其他目的，但我正在使用的信息被带到一个 php 文件而不是表单页面操作的 .htm 文件。我仍然是 CORS 的初学者，但我认为 URL 之类的东西不需要它。或者，这可能非常简单。

【问题讨论】：

如果您不介意支持旧版浏览器，您可以使用本地存储。比 cookie 和其他库更容易，恕我直言 link
对多个 cmets 感到抱歉，但此 SO 帖子中接受的答案比我以往任何时候都更好地描述了它 stackoverflow.com/questions/29986657/…

标签： javascript html url readonly transfer

【解决方案1】：

一种方法是在链接到第二页时将第一页的 url 包含在查询变量中。

为此，您将?firstpage=FIRSTPAGEURL 添加到网址的末尾，其中FIRSTPAGEURL 是第一页的编码网址，使用encodeURIComponent(str) 使其成为有效网址。

<a href="http://example.com?firstpage=http%3A%2F%2Ffoo.com">Go to second page</a>

然后，在第二页上，您可以通过从查询字符串中获取第一页的 url：

var url = getQueryVariable('firstpage'); // Get the encoded url
url = decodeURIComponent(url); // Decode the url

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) { return pair[1]; }
  }
  return false;
}

参考

https://css-tricks.com/snippets/javascript/get-url-variables/

【讨论】：