溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中指定區(qū)域的超鏈接轉(zhuǎn)換為URL

發(fā)布時(shí)間：2020-07-15 11:05:01 來(lái)源：億速云 閱讀：169 作者：Leah 欄目：web開發(fā)

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中指定區(qū)域的超鏈接轉(zhuǎn)換為URL？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中指定區(qū)域的超鏈接轉(zhuǎn)換為URL

話不多說(shuō)，我們直接來(lái)看下面的示例

代碼如下

DropHyperLink.css

.dropArea {
    margin-top:8px;    
    margin-bottom:8px;    
    width:320px;    
    height:64px;    
    background-color:#fff2a7;    
    border: 1px solid #ff6a00;
}
.longTextBox{
    width:80%;
}

DropHyperLink.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="DropHyperLink.css" />
  <script type="text/javascript">
    function load() {
          var droparea = document.getElementById('LinkDropArea');
      droparea.addEventListener('dragover', onDragOver, false);
      droparea.addEventListener('drop', onDrop, false);
    }    
    function onDragOver(event) {      //event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = 'link';
    }    
    function onDrop(event) {
          var url = event.dataTransfer.getData("text");      
          var textBox = document.getElementById('OutputTextBox');
      textBox.value = url;
    }  
  </script>
</head>
<body onload="load();">
  <div id="LinkDropArea" class="dropArea">把超鏈接拖到這里</div>
  <input id="OutputTextBox" class="longTextBox" type="text"/>
</body>
</html>

說(shuō)明：

可以在ID = LinkDropArea的div框中打開網(wǎng)頁(yè)瀏覽器的鏈接。要接受drop，要對(duì)框架的元素進(jìn)行dragode事件處理。在事件處理過(guò)程中，調(diào)用preventDefault（）并阻止未接收默認(rèn)拖動(dòng)的操作。同時(shí)將其設(shè)置為dataTransfer.dropEffect。drop事件處理程序還調(diào)用dataTransfer.getData（“text”）方法來(lái)獲取元素的文本數(shù)據(jù)。在鏈接的情況下，在鏈接的情況下，存儲(chǔ)的元素的文本數(shù)據(jù)中存儲(chǔ)了鏈接的URL。獲取的URL的字符串將顯示在屏幕底部的文本框中。

運(yùn)行結(jié)果

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中指定區(qū)域的超鏈接轉(zhuǎn)換為URL

然后準(zhǔn)備另一個(gè)Web瀏覽器窗口，拖動(dòng)Web瀏覽器上顯示的頁(yè)面中的超鏈接，并將其放在頁(yè)面上的拖放區(qū)域中。

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中指定區(qū)域的超鏈接轉(zhuǎn)換為URL

比如拖動(dòng)“前端開發(fā)”，那么結(jié)果如下圖所示

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中指定區(qū)域的超鏈接轉(zhuǎn)換為URL

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手