Maison > Article > interface Web > JavaScript convertit les hyperliens dans des zones spécifiées des pages Web en URL

JavaScript convertit les hyperliens dans des zones spécifiées des pages Web en URL

不言original: 2018-12-01 16:01:334051parcourir

Cet article vous présentera comment utiliser JavaScript convertit les hyperliens dans des zones spécifiées des pages Web en URL convertit les hyperliens dans des zones spécifiées des pages Web en URL convertit les hyperliens dans des zones spécifiées des pages Web en URL pour convertir des hyperliens dans des zones spécifiées de pages Web en URL. Examinons le contenu spécifique ci-dessous.

JavaScript convertit les hyperliens dans des zones spécifiées des pages Web en URL convertit les hyperliens dans des zones spécifiées des pages Web en URL convertit les hyperliens dans des zones spécifiées des pages Web en URL

Sans plus tard, regardons directement l'exemple ci-dessous

Le code est le suivant

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(&#39;LinkDropArea&#39;);
      droparea.addEventListener(&#39;dragover&#39;, onDragOver, false);
      droparea.addEventListener(&#39;drop&#39;, onDrop, false);
    }    
    function onDragOver(event) {      //event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = &#39;link&#39;;
    }    
    function onDrop(event) {
          var url = event.dataTransfer.getData("text");      
          var textBox = document.getElementById(&#39;OutputTextBox&#39;);
      textBox.value = url;
    }  
  </script>
</head>
<body onload="load();">
  <div id="LinkDropArea" class="dropArea">把超链接拖到这里</div>
  <input id="OutputTextBox" class="longTextBox" type="text"/>
</body>
</html>

Description :

Vous pouvez ouvrir le lien du navigateur Web dans la boîte div avec ID = LinkDropArea. Pour accepter un dépôt, gérez l'événement dragode sur l'élément du frame. Lors de la gestion des événements, PreventDefault() est appelé et empêche les opérations qui ne reçoivent pas de glisser par défaut. Définissez-le également sur dataTransfer.dropEffect. Le gestionnaire d'événements drop appelle également la méthode dataTransfer.getData("text") pour obtenir les données texte de l'élément. Dans le cas d'un lien, l'URL du lien est stockée dans les données texte de l'élément stocké. La chaîne de l'URL obtenue sera affichée dans la zone de texte en bas de l'écran.

Exécuter les résultats

Puis préparez une autre fenêtre de navigateur Web, faites glisser le lien hypertexte dans la page affichée sur le navigateur Web et déposez-le dans le zone de dépôt sur la page.

JavaScript convertit les hyperliens dans des zones spécifiées des pages Web en URL convertit les hyperliens dans des zones spécifiées des pages Web en URL

Par exemple, faites glisser "Développement Front-end", le résultat est alors comme indiqué ci-dessous

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre le problème des requêtes inter-domainesArticle suivant：Comment résoudre le problème des requêtes inter-domaines

Articles Liés

Voir plus