Question

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

Answer 1

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

Answer 2

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

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

Answer 3

是的，您可以将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>

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

3 个答案: