현재 주소를 복사하는 버튼만들기입니다. js. php

현재주소복사 버튼 js입니다. 

링크나 기타 텍스트등에도 사용

소스1

 현재주소 전부를 가져오는 php 부분 포함

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<?php

$copy_link = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

?>

<span id="url_field" ><?php echo $copy_link;?></span>

<input id="copy_btn" type="button" value="copy">

  

<script>

var copyBtn = document.querySelector('#copy_btn');

copyBtn.addEventListener('click', function () {

  var urlField = document.querySelector('#url_field');

   

  // create a Range object

  var range = document.createRange();  

  // set the Node to select the "range"

  range.selectNode(urlField);

  // add the Range to the set of window selections

  window.getSelection().addRange(range);

   

  // execute 'copy', can't 'cut' in this case

  document.execCommand('copy');

}, false);

</script>

php부분은 현재 주소를 얻기 위한  소스입니다

주소이나 링크 등이 화면에 출력될때 사용되기 편하지만  

현재 주소를 복사하는 버튼만 필요한 경우에는 소스2를 사용하시면됩니다.

소스2




<button onclick="CopyLink()">현재주소복사</button>

<script>

function CopyLink() {

  copyTextToClipboard(location.href);

}

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

}

<script>