在Javascript中发布URL共享

时间:2017-12-17 04:17:46

标签: javascript jquery html url jinja2

我希望在我的帖子上有一个“分享”按钮,将链接复制到剪贴板中。它有效,我最终得到这样一个链接:

'https://odyss.ca/brief/200/200-ara-ghougassian-%7C-student-%7C-ubc-limit-laws'

然而,当我在搜索栏中按Enter键后,.ca之后的'/'消失:

'https://odyss.cabrief/200/200-ara-ghougassian-%7C-student-%7C-ubc-limit-laws'

我的HTML:

function shareBrief(share_link) {
  var link = "odyss.ca/brief/";
  link = link.concat(share_link);
  copyTextToClipboard(link);
  Materialize.toast('Link copied to your clipboard!', 4000);
}

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  // 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);
}
<button id="{{brief.share_link}}" type="button" float="right" class="btn-flat tools pull-right"
   href="#" onclick="shareBrief(this.id)">
<i class="material-icons">share</i>
</button>

1 个答案:

答案 0 :(得分:0)

服务器的URL重写模块中的问题。当您点击http链接时,您将服务器重定向到https并且在此期间该模块中可能存在拼写错误,该错误会将其重定向到错误的URL。修复拼写错误或在复制时在链接中附加https。见下文

function shareBrief(share_link){

  var link = "https://odyss.ca/brief/";
  link = link.concat(share_link);
  copyTextToClipboard(link);
  // Materialize.toast('Link copied to your clipboard!', 4000);

}


function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  // 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);
}
<button id="{{brief.share_link}}" type="button" float="right" class="btn-flat tools pull-right"
href="#" onclick="shareBrief(this.id)">

  <i class="material-icons">share</i>

</button>