是否可以将 href 属性设置为任意字符串，而不是以 http 开头？答案

【问题标题】：Is it possible to set href attribute to an arbitrary string, not beginning with http?是否可以将 href 属性设置为任意字符串，而不是以 http 开头？
【发布时间】：2016-09-16 00:05:11
【问题描述】：

我想将<a> 标记的HTML href 属性设置为任意文本，以供访问者通过“复制链接位置”上下文菜单将其复制到剪贴板。是否可以将<a> 标记href 属性设置为不以http 或任何其他方案（如ftp）开头的任意字符串？

【问题讨论】：

是的，您可以提供无架构 URL。

标签： html dom tags href

【解决方案1】：

是的，您可以将href 属性设置为您喜欢的任何内容，但是“复制链接位置”总是会将其解析为完整的 URL，因此它不起作用。例如，如果您在“http://www.example.com/about”页面上，并且将 href 设置为“foo”，那么当用户复制链接时，它实际上会复制“http://www.example.com/foo”。

更好的选择是使用 JavaScript 来执行大多数浏览器内置的复制命令，如下例所示。详情请见this question。

$('.copy').each(function() {
  var $this = $(this);
  var copyText = $this.text();

  var copyButton = $('<span class="copyButton">Copy</span>');
  copyButton.on('click', function() {
    copyTextToClipboard(copyText);
  })

  $this.append(copyButton);
})

// copied from https://stackoverflow.com/a/30810322/1901857
function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a flash,
  // so some of these are just precautions. However in IE the element
  // is visible whilst the popup box asking the user for permission for
  // the web page to copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);

  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}

a.copy {
  position:relative;
}

a.copy .copyButton {
  display:none;
  position:absolute;
  left:100%;
  top:0;
  background-color:gray;
}

a.copy:hover .copyButton {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Click the button to <a class="copy" href="#">copy the text</a> in this div.</div>

【讨论】：

【解决方案2】：

以下是href 属性可以包含的可能值：

绝对 URL - 指向另一个网站（如 href="http://www.example.com/default.htm")
相对 URL - 指向网站内的文件（如 href="default.htm")
链接到页面内具有指定 id 的元素（如 href="#top")
其他协议（如https://、ftp://、mailto:、file:等）
一个脚本（如href="javascript:alert('Hello');"）

【讨论】：

【解决方案3】：

您可以将属性值设置为任意字符串，但是当用户选择“复制链接位置”时，它将获取该字符串，将其解析为 URL，然后返回绝对 URL。如果字符串不以 URL 方案开头，那么它将被视为相对 URL 并给定一个。

【讨论】：